How to make columns into rows in css grid

December 14, 2022

I have a css-grid layout set up as 3 columns. When a certain media-query matches, i want it to instead flow as rows where the first column becomes the first row, covering the full with. Column two and three should become one row and share the space equally. How can i achieve that? (i know how to write a media query, code is for demonstrating only)

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

>Solution :

You must display grid then when your @media screen hits its threshold it will begin to flex. You have to tell which rows you want to combine within your flexed column and how far to extend them. Hopefully this helps and makes sense. good luck!

.thegrid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

@media only screen and (max-width: 600px) {
  .thegrid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 80px 200px;
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  .row-1 {
    grid-column: 1/ span 2;
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
}

<div class="thegrid">
  <div class="row-1">
    content 1
  </div>
  <div class="row-2">
    content 2
  </div>
  <div class="row-2">
    content 3
  </div>
</div>