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

Answer 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>

Answer 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>