How to Have a Varying Number of Columns Per Row in a CSS Grid

Can I have a varying number of columns per row in a CSS grid?

If your rows have varying numbers of cells that aren't all laid out on a single two-dimensional (row and column) space, you don't have a grid. A grid by definition contains a fixed number of rows and columns, and cells that span one or more of each. Maybe you'd have multiple heterogeneous grids, one per row, but that just defeats the whole point of grids, really.

If your varying number of rows is symmetrical or follows some kind of pattern, you can follow Michael_B's suggestion of building a grid based on a common denominator and populating the grid areas mosaic-style. This is just about as non-trivial as a flexbox solution currently would be, but once more browsers implement flexbox fragmentation, flexbox should become the obvious choice over grid as it ought to be.

Can I make a CSS grid with dynamic number of rows or columns?

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>

CSS Grid - Number of Columns can be different in the first row than second row

This is what I wanted actually.

section {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 5px;}
div {  height: 50px;  background: red;}div:first-child {  grid-column: 1 / 3;}

<section>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div></section>

css grid layout different number of columns in each row

Am not sure if you can easily do this with grid, but with flexbox it's easy to do and you can always adjust the order property to change the layout on small screens.

.container {  display:flex;  flex-wrap:wrap;  height:300px;}.a,.b {  flex-basis:calc(100% / 2);}.c,.d,.e {  flex-basis:calc(100% / 3);}
.container > div {  border:1px solid;  box-sizing:border-box;}

<div class="container">  <div class="a">A</div>  <div class="b">B</div>  <div class="c">C</div>  <div class="d">D</div>  <div class="e">E</div></div>

Defining columns for a variable number of items, all in one row, equally spaced

This configuration is suitable for Flexbox where all you need to do is

.wrapper {
  display:flex
}
.wrapper img {
  flex:1;
}

Using CSS grid you have to do

.wrapper {
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
}

You consider a column flow and you define the width of column to be equal to 1fr

.wrapper {
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
  grid-gap:5px;
  margin:10px;
}

.wrapper span {
  height:50px;
  background:red;
}

<div class="wrapper">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="wrapper">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Set CSS Grid number of columns dynamically on the basis of list items

You can use grid-template-rows: repeat to do that like this:

.list {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(15, 45px);
  gap: 10px;
  grid-auto-flow: column;
}

.list-item {
  background: black;
  width: 40px;
  height: 40px;
  margin: 10px;
  color: white;
  font-size: 12px;
}

<ul class='list'>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
</ul>