CSS Grid: Dividing items equally based on the number of items present

Question

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with:

.grid-sample {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 4rem;
    padding: 0 5rem; 
}

As far as I comprehend, using grid-template-columns: 1fr ... divides the row into 4 equal columns.

I wonder if there is a way to enhance this code so that it dynamically adjusts based on the number of items present? For instance, when there are only 3 items, can the row automatically split into 3 equal columns instead of grouping them in the first three positions of the 4-column grid?

Your insights will be greatly appreciated!

css css-grid

Answer 1

Answer №1

CSS grid is the way to go for this implementation, utilizing grid-auto-columns and setting grid-auto-flow to columns:

document.querySelector('button').addEventListener('click', (e) => {
  let button = e.currentTarget,
    parent = button.nextElementSibling,
    newChild = document.createElement('span');

  parent.append(newChild);
});

.grid-sample {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4rem;
  padding: 0 5rem;
  /* purely to generate content, otherwise irrelevant */
  counter-reset: childCounter;
  margin-block: 1rem;
}

span {
  background-color: hsl(250deg 90% 85% / 1);
  text-align: center;
}

span::before {
  content: counter(childCounter, decimal-leading-zero);
  counter-increment: childCounter;
}

<div class="grid-sample">
  <span></span>
</div>

<div class="grid-sample">
  <span></span>
  <span></span>
  <span></span>
</div>



<div class="grid-sample">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="grid-sample">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<button type="button">Add span</button>
<div class="grid-sample">
  <span></span>
</div>

JS Fiddle demo.

The drawback of this method is that it continues adding elements into new columns instead of wrapping them onto a new line when reaching maximum space.

In such cases, using flex-box layout could be a better alternative, like this:

document.querySelector('button').addEventListener('click', (e) => {
  let button = e.currentTarget,
    parents = document.querySelectorAll('section > div'),
    newChild = document.createElement('span');

  parents.forEach(
    (el) => el.append(newChild.cloneNode())
  )
});

section {
  box-sizing: border-box;
  inline-size: clamp(40rem, 90%, 1100px);
  margin-inline: auto;
  padding: 0;
}

.grid-sample,
.flex-sample {
  gap: 2rem;
  padding: 0 2rem;
  /* purely to generate content, otherwise irrelevant */
  counter-reset: childCounter;
  margin-block: 1rem;
}

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

.flex-sample {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
}

span {
  background-color: hsl(250deg 90% 85% / 1);
  flex-grow: 1;
  padding: 0.5rem;
  text-align: center;
}

span::before {
  content: counter(childCounter, decimal-leading-zero);
  counter-increment: childCounter;
}

<button>Add new child</button>
<section>
  <div class="grid-sample">
    <span></span>
  </div>
</section>
<section>
  <div class="flex-sample">
    <span></span>
  </div>
</section>

JS Fiddle demo.

For further reading, check out these references:

Answer 2

CSS grid is the way to go for this implementation, utilizing grid-auto-columns and setting grid-auto-flow to columns:

document.querySelector('button').addEventListener('click', (e) => {
  let button = e.currentTarget,
    parent = button.nextElementSibling,
    newChild = document.createElement('span');

  parent.append(newChild);
});

.grid-sample {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4rem;
  padding: 0 5rem;
  /* purely to generate content, otherwise irrelevant */
  counter-reset: childCounter;
  margin-block: 1rem;
}

span {
  background-color: hsl(250deg 90% 85% / 1);
  text-align: center;
}

span::before {
  content: counter(childCounter, decimal-leading-zero);
  counter-increment: childCounter;
}

<div class="grid-sample">
  <span></span>
</div>

<div class="grid-sample">
  <span></span>
  <span></span>
  <span></span>
</div>



<div class="grid-sample">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="grid-sample">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<button type="button">Add span</button>
<div class="grid-sample">
  <span></span>
</div>

JS Fiddle demo.

The drawback of this method is that it continues adding elements into new columns instead of wrapping them onto a new line when reaching maximum space.

In such cases, using flex-box layout could be a better alternative, like this:

document.querySelector('button').addEventListener('click', (e) => {
  let button = e.currentTarget,
    parents = document.querySelectorAll('section > div'),
    newChild = document.createElement('span');

  parents.forEach(
    (el) => el.append(newChild.cloneNode())
  )
});

section {
  box-sizing: border-box;
  inline-size: clamp(40rem, 90%, 1100px);
  margin-inline: auto;
  padding: 0;
}

.grid-sample,
.flex-sample {
  gap: 2rem;
  padding: 0 2rem;
  /* purely to generate content, otherwise irrelevant */
  counter-reset: childCounter;
  margin-block: 1rem;
}

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

.flex-sample {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
}

span {
  background-color: hsl(250deg 90% 85% / 1);
  flex-grow: 1;
  padding: 0.5rem;
  text-align: center;
}

span::before {
  content: counter(childCounter, decimal-leading-zero);
  counter-increment: childCounter;
}

<button>Add new child</button>
<section>
  <div class="grid-sample">
    <span></span>
  </div>
</section>
<section>
  <div class="flex-sample">
    <span></span>
  </div>
</section>

JS Fiddle demo.

For further reading, check out these references:

CSS Grid: Dividing items equally based on the number of items present

Answer №1

Similar questions

Image set as the background on a website

How to align Font Awesome icons inside `<span>` vertically with each other

The CSS transition will only activate when coupled with a `setTimeout` function

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

iPhone 3GS and 4 not expanding DIVs by 100%

What is the proper way to add my image to CSS?

How can I address the variations in CSS appearance between Firefox and Google Chrome?

Guide: Previewing uploaded images with HTML and jQuery, including file names

Panel floating with Bootstrap framework

Struggling to accurately differentiate between a CSS and Bootstrap code

Leveraging JavaScript code repeatedly

Iterating through an SVG path multiple times

Elements with inline-block display not aligning horizontally next to each other

The functionality of the CSS transform property seems to be malfunctioning

Incorporating a bottom line or border within the input field with a specified width

Create a visually appealing collage using CSS without the need for traditional IMG tags

Utilize the hexadecimal color code as a string within the darken function

Creating a proper nth-child CSS for multi-level HTML elements involves understanding the structure of the elements

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

What sets apart element.class from element .class in CSS?