Can I make a CSS grid with dynamic number of rows or columns?
Solution 1:
Okay, after reading the MDN reference, I found the answer! The key to dynamic rows (or columns) is the repeat property.
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. Or you can use grid-auto-rows in my particular example.
Solution 2:
Simply use below code to generate grid columns automatically
.container {
display: grid;
grid-auto-flow: column;
}