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

Question

I am having a hard time describing what I am looking for (searching on Google)

I have dynamic logo content, it could be 3 logos, it could be 7.. My template needs to accommodate them all, They all need to display in one row equally spaced..

So for example if I knew in advance I had 3 items my code would be this

grid-template-columns: 1fr 1fr 1fr;

if I knew in advance I had 7 items my code would be this

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

I won't know how many items I have ever. So how can I code this to accommodate a dynamic amount of columns?

score 5 · Accepted Answer · answered Aug 17 '21 at 13:32

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>

@Dai the goal here is to no have wrapped items : *They all need to display in one row equally spaced..* (note the "one row") — Temani Afif, Aug 17 '21 at 13:35

score 3 · Answer 2 · answered Aug 17 '21 at 13:46

3

Use grid-auto-columns: 1fr.

The grid container itself will create columns, as necessary, and each column will be 1fr.

No need to define your own columns. Let the grid to the work.

answered Aug 17 '21 at 13:46

Michael Benjamin

346,931
104
581
701

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

2 Answers2