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

问题

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%;
}

回答1:

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>

回答2:

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>

回答3:

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

来源：https://stackoverflow.com/questions/50447477/how-do-i-make-the-first-grid-item-span-100

标签

html

css

css3

css-grid