Justifying column(s) in CSS Grid defined with repeat()

Question

I have a multiple column CSS Grid defined with repeat(6, 1fr) but with only one or two columns defined. It seems justifying center or space-between does not work in this case, probably because the grid already knows it has 6 equal width columns so there is nothing to justify?

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 3em;
    grid-gap: 1rem;
    /*justify-items: center; horizontally centers column content */
    /*align-items: center; vertically centers column content */
}

.grid > div {
  background-color: yellow;
}

.grid > div:first-child {
  background-color: orange;
}

<div class="grid">
   <div>content1</div>
   <div>content2</div>
</div>

probably because the grid already knows it has 6 equal width columns so there is nothing to justify? --> you got it. Flexbox is what you need here — Temani Afif
– Temani Afif, Commented Mar 10, 2021 at 11:59
I know that :) However, the premise was that if you are obliged to use a CSS Grid layout and you encounter this situation, is there a way to do it? Other than just rewrite to flexbox. — lavirius
– lavirius, Commented Mar 10, 2021 at 12:07

Temani Afif · Accepted Answer · 2021-03-10 12:35:13Z

1

If you will have only one row you can do the following otherwise use flexbox:

.grid {
  display: grid;
  grid-auto-columns: calc((100% - 5rem)/6); 
  grid-auto-flow: column;
  grid-template-rows: 3em;
  grid-gap: 1rem;
  justify-content: center;
  border: 1px solid;
}

.grid>div {
  background-color: yellow;
}

.grid>div:first-child {
  background-color: orange;
}

<div class="grid">
  <div>content1</div>
  <div>content2</div>
</div>

<div class="grid">
  <div>content1</div>
  <div>content2</div>
  <div>content3</div>
</div>

<div class="grid" style="justify-content: space-between;">
  <div>content1</div>
  <div>content2</div>
</div>

<div class="grid" style="justify-content: space-between;">
  <div>content1</div>
  <div>content2</div>
  <div>content3</div>
</div>

edited Mar 10, 2021 at 12:35

answered Mar 10, 2021 at 12:04

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lavirius Over a year ago

I see the solution but can you explain what is happening with refactoring from the grid-template-columns: repeat(6, 1fr) to your set of grid-auto-... rules? Also, why would this now work in multiple rows layout?

Temani Afif Over a year ago

@lavirius using your rule you will always have 6 columns, with mine the number of column will depend on the element (I didn't define any number of columns)

Temani Afif Over a year ago

@lavirius it won't work with mutiple rows because I am using a column flow so fixed number of row and variable number of column (in my case one row)

lavirius Over a year ago

I would vote your answer if it would be more elaborately explained :)

Collectives™ on Stack Overflow

Justifying column(s) in CSS Grid defined with repeat()

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related