Is it possible to change the layout of a CSS grid from 3 columns to 1 row using media queries? Specifically, I want the first column to become the first row and take up the full width, while the second and third columns should combine to form one row with equal spacing. How can this be achieved?
.thegrid {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 40px;
}<div class="thegrid">
<div>
content 1
</div>
<div>
content 2
</div>
<div>
content 3
</div>
</div>