How to make columns into rows in css grid

Question

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>

Have you tried a media query which hanged the grid-temptate-columns (and rows)? — A Haworth, Dec 14 '22 at 20:42
@jsteurer you really do not need a whole framework just for this... — Nora Söderlund, Dec 14 '22 at 20:49
@NoraSöderlund My point. Actually i try my best to not use such framework as bootstrap. nu ska jag jobba vidare! — , Dec 14 '22 at 20:50
Your content is already displaying as rows because you have not actually applied grid layout correctly (for starters you don't have `display: grid` declared). — TylerH, Dec 14 '22 at 20:52
In your mediaquery you can alter the column layout to just 2 columns and get the first div to span both of them. Nothing else needs to change. — A Haworth, Dec 14 '22 at 20:56

score 0 · Answer 1 · answered Dec 14 '22 at 20:46

0

If you keep the columns, and add grid-column: 1/-1 to the first div (this makes sure the div covers the complete grid area). Does that give the desired look?

answered Dec 14 '22 at 20:46

ninadepina

661
2
12

jsteurer · Accepted Answer · 2022-12-14T20:57:45.363

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>

Perfect. Thanks! I have newly (ish) started to implement the grid layout into my workflow and figured there must be a way. — , Dec 14 '22 at 20:47

How to make columns into rows in css grid

2 Answers2