How do I make the first grid item span 100%?

Question

I have the following for desktop, which creates 4 equal columns all at 25%.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

However, how can I resize these in a media query to make the first column go 100% and the rest of the columns naturally wrap underneath and now be 33.333% still using CSS grids?

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

score 67 · Accepted Answer · answered May 21 '18 at 11:10

67

Change the grid to three columns and set the first div to span them all at the appropriate point.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer-inner div {
  border: 1px solid grey;
  text-align: center;
}

.footer-inner :first-child {
  grid-column: 1 / -1;
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

answered May 21 '18 at 11:10

Paulie_D

107,962
13
142
161

2

Awesome answer, I would add for any Magento developers (yes it's a bit tenuous) that if you want to do this with `.lib-css()` you should use `grid-column-start, 1` and `grid-column-end, -1` instead of the `grid-column` shorthand – Scott Anderson Dec 15 '20 at 13:31
what does the -1 mean? – Aldimir Jul 06 '23 at 10:08

score 5 · Answer 2 · answered May 21 '18 at 11:14

You can do it with the grid-column: span 3 set on the :first-child:

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 650px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-inner > div:first-child {
    grid-column: span 3;
    border: 1px solid;
  }
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Michael Benjamin · Answer 3 · 2018-05-21T15:53:47.323

Here's a very simple method. You only need three lines of code.

For wide screens:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div {
  grid-row: 1;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

For narrow screens:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div:first-child {
  grid-column: span 3;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Explanations

wide screens

The grid-auto-columns property sets the width of implicit columns. By setting the value to 1fr, all columns created will consume an equal distribution of free space in the row. With grid-row: 1 applied to all items they will appear on the first row.

narrow screens

Once you set the first item to span three implicit columns the container must create three columns. The remaining items can then fit neatly underneath in the newly-created columns.

Lastly, consider using fr units instead of percentages (like 33.33%) in your track sizing. Then you don't have to worry about factoring in margins and grid gaps. Here's some more info: The difference between percentage and fr units in CSS Grid Layout

How do I make the first grid item span 100%?

3 Answers3

Linked