CSS Grid single column layout for mobile without media queries

7343 views css css-grid
9

I have CSS Grid layout for desktop screens going in clockwise like this:

Layout picture with 4 sections, going in clockwise order

Code:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "one two" "four three";
}

.one { grid-area: one; }

.two { grid-area: two; }

.three { grid-area: three; }

.four { grid-area: four; }
<div class="grid-container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
</div>

For mobile & tablet screens I want these sections to get stacked in increasing order:

This: 1 | Not this: 1
      2 |           2
      3 |           4
      4 |           3

Can this be done without using media queries? I feel I'm missing something simple.

answered question

Why you don't want to use media queries? Is there any specific reason?

1 Answer

4

No you must use media query

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "one" "two" "three" "four";
}

posted this

Have an answer?

JD

Please login first before posting an answer.