Change the Number of Columns and Rows in a Grid as the Number of Items Increase

Change the number of columns and rows in a grid as the number of items increase

Implicit columns creation can do this. You can consider nth-child()/nth-last-child() to create a new column when you reach a specific number of columns:

.container {
  display: inline-grid;
  width: 100px;
  vertical-align: top;
  border: 1px solid;
}
.container > :nth-child(2) {
  grid-column: 2;
}

.container > :nth-last-child(n + 5) ~ :nth-child(3) { 
 grid-column: 3;
}

.container > :nth-last-child(n + 10) ~ :nth-child(4) { 
 grid-column: 4;
}

.container > :nth-last-child(n + 17) ~ :nth-child(5) { 
 grid-column: 5;
}

.container > * {
  border: 1px solid red;
  aspect-ratio: 1;
}

<div class="container">
<div></div>
</div>

<div class="container">
<div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Specify Number of Rows and Columns in Grid

You can use grid-template-columns to specify the number of columns.

The number of columns is defined by the number of values in the list.

Below, I'm using repeat() as shorthand to generate four values.

Based on your existing code, auto auto auto auto would also work.

Also see CSS Grid Layout.

.grid-container {  display: grid;  grid-template-columns: repeat(4, 1fr);  background-color: #2196F3;  padding: 10px;}
.grid-item {  background-color: rgba(255, 255, 255, 0.8);  border: 1px solid rgba(0, 0, 0, 0.8);  padding: 20px;  font-size: 30px;  text-align: center;}

<h1>Grid Elements</h1><div class="grid-container">  <div class="grid-item">1</div>  <div class="grid-item">2</div>  <div class="grid-item">3</div>  <div class="grid-item">4</div>  <div class="grid-item">5</div>  <div class="grid-item">6</div>  <div class="grid-item">7</div>  <div class="grid-item">8</div>  <div class="grid-item">9</div>  <div class="grid-item">10</div>  <div class="grid-item">11</div>  <div class="grid-item">12</div></div>

Dynamically changing the number of rows in a CSS Grid

You could set a class on the div.layout element (or some other parent tag) based on the username variable you are setting, and then adjust your CSS grid to redefine the CSS grid columns/rows based on that class.

(I'm not super familiar with React, but if memory serves you can set a class conditionally like this)

<div className={"layout " + (this.props.usernameShown ? 'username-avail' : 'username-unavail')}>

Then in your CSS file, you can define your CSS grid such as

.layout {
    display: grid;
    grid-template-columns: minmax(200px, auto) minmax(200px, 300px) minmax(900px, auto) minmax(200px, auto);
    grid-gap: 5px;
    height: calc(100vh);
}

.username-avail.layout {
    /* Four rows */
    grid-template-rows: 60px 60px 60px minmax(700px, auto);
}

.username-unavail.layout {
    /* Three rows */
    grid-template-rows: 60px 60px minmax(700px, auto);
}

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>

How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

Use this syntax:

grid-template-columns: 260px 260px 260px;

Or

grid-template-columns: repeat(3,260px);

Instead of this:

grid-template-columns: repeat(auto-fill, 260px);

Use media queries to set less columns on smaller screens.

Also if the row and column gap is the same you can use grid-gap.

Documentation

.grid-container{  display: grid;  grid-template-columns: 260px 260px 260px;  grid-gap: 18px;  background-color: #fff;  color: #444;  justify-content: center; }
.card {   border: 1px solid #000;   width: 260px;   height: 260px;}

<div class="container">   <div class="grid-container">   <div class="grid-item">      <div class="card"></div>   </div>   <div class="grid-item">      <div class="card"></div>   </div>   <div class="grid-item">      <div class="card"></div>   </div>   <div class="grid-item">      <div class="card"></div>   </div>   <div class="grid-item">      <div class="card"></div>   </div>   <div class="grid-item">      <div class="card"></div>   </div></div></div>

Defining the number of rows in CSS grids

Simply define grid-auto-rows and you don't need to know the number of items

ul {  display: grid;  grid-auto-rows:1fr;  margin:10px;  padding:0;}ul li {  border:1px solid;  list-style-type:none;}

<ul>  <li>item <br>one</li>  <li>item two</li>  <li>item three</li></ul>
<ul>  <li>item <br>one</li>  <li>item two</li>  <li>item three</li>  <li>item two</li>  <li>item three</li></ul>
<ul>  <li>item <br>one</li>  <li>item two</li></ul>

CSS grid - maximum number of columns without media queries

With CSS grid you can consider the use of max(width, 100%/N) where N is the maximum number of columns. If the width of the container increases, 100%/N will for sure be bigger than width, thus we won't have more than N elements per row.

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

.grid-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

<div class="grid-container" style="--n:3">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

---

Related Topics