我想做的是制作一个具有动态数量单元格的CSS grid。为简单起见,我们假设每行总有四个单元格。我可以指定具有这种动态行数的网格吗?
为了简化,请参阅Flexbox实现:
const COLORS = [
'#FE9',
'#9AF',
'#F9A',
"#AFA",
"#FA7"
];
function addItem(container, template) {
let color = COLORS[_.random(COLORS.length - 1)];
let num = _.random(10000);
container.append(Mustache.render(template, { color, num }));
}
$(() => {
const tmpl = $('#item_template').html()
const container = $('#app');
for(let i=0; i<5; i++) { addItem(container, tmpl); }
$('#add_el').click(() => {
addItem(container, tmpl);
})
container.on('click', '.del_el', (e) => {
$(e.target).closest('.item').remove();
});
});
&#13;
.container {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.container .item {
flex: 0 0 calc(25% - 1em);
min-height: 120px;
margin: 0.25em 0.5em;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
</div>
<button id="add_el">Add element</button>
<template id="item_template">
<div class="item" style="background: {{color}}">
<p>{{ num }}</p>
<p>
<button class="del_el">Delete</button>
</p>
</div>
</template>
&#13;
P上。 S.显然,我第一次不够清楚......我想用最新的CSS Grid Layout.
重新创建这个效果答案 0 :(得分:24)
好的,看了MDN reference,后我找到了答案!动态行(或列)的关键是repeat属性。
const COLORS = [
'#FE9',
'#9AF',
'#F9A',
"#AFA",
"#FA7"
];
function addItem(container, template) {
let color = COLORS[_.random(COLORS.length - 1)];
let num = _.random(10000);
container.append(Mustache.render(template, { color, num }));
}
$(() => {
const tmpl = $('#item_template').html()
const container = $('#app');
for(let i=0; i<5; i++) { addItem(container, tmpl); }
$('#add_el').click(() => {
addItem(container, tmpl);
})
container.on('click', '.del_el', (e) => {
$(e.target).closest('.item').remove();
});
});
.container {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(auto-fill, 120px);
grid-row-gap: .5em;
grid-column-gap: 1em;
}
.container .item {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
</div>
<button id="add_el">Add element</button>
<template id="item_template">
<div class="item" style="background: {{color}}">
<p>{{ num }}</p>
<p>
<button class="del_el">Delete</button>
</p>
</div>
</template>
P上。 S.或者您可以在我的特定示例中使用grid-auto-rows。
答案 1 :(得分:9)
只需使用以下代码即可自动生成网格列
.container {
display: grid;
grid-auto-flow: column;
}
答案 2 :(得分:3)
对于那些着陆到这里寻找动态表的方式,将项目包装到新行中,并且仍然跨行对齐的情况,一个很好的解决方案是将flex
与{{1}一起使用}和flex-wrap
用于所有元素:
flex: 1
答案 3 :(得分:1)
您不需要使用重复。相反,您可以只使用JavaScript代码中的变量--grid-template-columns。
rootEl.style.setProperty('--grid-template-columns' theGridTemplateColumnsValue)
theGridTemplateColumnsValue是一个字符串,也可以包含其他css变量。 这样,您可以每行具有动态的列数。
答案 4 :(得分:0)
这样的东西?
$(document).ready(function() {
//Prepare Element selectors
var cssElem = $("#Dynam"), rowElem = $("#rows"), columnElem = $("#columns"), appElem = $("#app");
var noItems = $(".item").length,defaultColumns = 4;
//Init default state
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / defaultColumns) + "% - 1em);}");
columnElem.val(defaultColumns);
rowElem.val(Math.ceil(noItems / columnElem.val()));
//Add listeners to change
appElem.on("DOMSubtreeModified", function() {
noItems = $(".item").length;
rowElem.val(Math.ceil(noItems / columnElem.val()));
});
columnElem.on("change", function() {
rowElem.val(Math.ceil(noItems / columnElem.val()));
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
});
rowElem.on("change", function() {
columnElem.val(Math.ceil(noItems / rowElem.val()));
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
});
});
const COLORS = ['#FE9', '#9AF', '#F9A', "#AFA", "#FA7"];
function addItem(container, template) {
let color = COLORS[_.random(COLORS.length - 1)];
let num = _.random(10000);
container.append(Mustache.render(template, {
color,
num
}));
}
$(() => {
const tmpl = $('#item_template').html()
const container = $('#app');
for (let i = 0; i < 5; i++) {
addItem(container, tmpl);
}
$('#add_el').click(() => {
addItem(container, tmpl);
})
container.on('click', '.del_el', (e) => {
$(e.target).closest('.item').remove();
});
});
.container {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.container .item {
min-height: 120px;
margin: 0.25em 0.5em;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="Dynam"></style>
<button id="add_el">Add element</button> rows:
<input id="rows" /> columns:<input id="columns" />
<div id="app" class="container">
</div>
<template id="item_template">
<div class="item" style="background: {{color}}">
<p>{{ num }}</p>
<p>
<button class="del_el">Delete</button>
</p>
</div>
</template>
答案 5 :(得分:0)
另一个选择是使用JavaScript动态设置gridTemplateRows和gridTemplateColumns属性。可以按照以下步骤进行操作:
function initDynamicGrid(numRows, numColumns){
const totalSqaures = numRows * numColumns;
let rowsString = "";
let columnsString = "";
for(let i = 0; i < numRows;i++){
if(i === numRows -1){
rowsString +="1fr";
}else{
rowsString +="1fr ";
}
}
for(let i = 0; i < numColumns;i++){
if(i === numColumns -1){
columnsString +="1fr";
}else{
columnsString +="1fr ";
}
}
let gridContainer = document.createElement('div');
gridContainer.style.display ="grid";
gridContainer.style.gridTemplateRows = rowsString;
gridContainer.style.gridTemplateColumns = columnsString;
for(let i = 0; i < totalSqaures; i++){
let squareInGrid = document.createElement('div');
// Here you can put stuff into the squareInGrid or append css to it.
gridContainer.appendChild(squareInGrid );
}
}
它可能不太花哨,但它是完成工作的好方法。我希望这对某人有所帮助。