Can I Make A CSS Grid With Dynamic Number Of Rows Or Columns?

Answer :

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.

Simply use below code to generate grid columns automatically

.container {   display: grid;   grid-auto-flow: column; } 

For those landing here looking for a way to have a sort of dynamic table, with items wrapping to new rows, and still being aligned across rows, a pretty good solution is to use flex with flex-wrap and flex: 1 for all elements:

.container {   width: 100%;   display: flex;   flex-wrap: wrap;   align-items: center; }  .container .item {   flex: 1; }