0

I'm trying to achieve this layout (https://codepen.io/totkeks/pen/PowodPq) with a top section, main section and side section.

<div class="grid">
  <div class="top">Top</div>
  <div class="main">Main</div>
  <div class="side">Side</div>
</div>

body {
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 3rem;

  grid-template-columns: 22rem minmax(48rem, auto);
  grid-auto-rows: auto;

  padding: 3rem;
  min-height: 100vh;
  box-sizing: border-box;
  border: 2px dotted black;
}

.top, .main, .side {
  background-color: papayawhip;
}

.main {
  grid-row: span 2;
}

@media screen and (max-width: 1200px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

When the page is smaller (< 1280px currently in CSS query) the three sections are stacked on top of each other, first top, then main, then side, all covering the full width.

When the page is wider, the top and side sections are fixed size on the left side and the main section is on the right side, growing as space becomes available.

Just a moment ago I found this Q&A Responsive layout without media query and while it goes in the right direction, it is not entirely what I'm trying to achieve.

I already spent two evenings with this idea and would like to find a solution or get a definitive "No, that's not possible with current CSS".

totkeks
  • 89
  • 2
  • 9
  • 1
    and what the issue of using media query? – Temani Afif Dec 03 '19 at 21:24
  • I'm not quite sure what you're trying to achieve, but if you're just trying to stack elements on top of one another on narrow viewports without media queries, then this is indeed possible with both flexbox and CSS Grid... and even regular CSS. Heck, wrapping is even the *default* for `
    ` elements; just set a `max-width` and `float`. In flexbox you'd be looking for `flex-wrap: wrap`.
     – Obsidian Age Dec 03 '19 at 21:27
  • here is another similar question mixing grid and auto-fit https://stackoverflow.com/questions/58897450/css-grid-with-top-bar-sidebar-and-repeating-content/58900281#58900281 , maybe mediaquerie can be avoided here https://codepen.io/gc-nomade/pen/VwYYbxP – G-Cyrillus Dec 03 '19 at 22:12

1 Answers1

1

You could give a try with auto-fit, grid-colum, grid-row and use width + calc() to trick the wrapping . But you could find funny behaviors from a browser to anoter . (auto-flow is required ) However, mediaquerie is made for this, much cleaner and reliable.

body {
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 3rem;
  margin: 1em;
  border: solid;
  grid-template-columns: repeat(auto-fit, minmax(22rem,auto));
  grid-auto-rows: auto;

  padding: 3rem;
  min-height: calc(100vh - 2em);
  box-sizing: border-box;
}

.top,
.main,
.side {
  background-color: orange;
  border:solid;
}
.top,
.side {
  grid-column: 1;
  width: 22rem;
  min-width:100%;
 
}
.main {
  grid-column: auto;
  min-width: calc(100vw - 33rem);
  grid-row: span 2;
}
<div class="grid">
  <div class="top">Top</div>
  <div class="main">Main</div>
  <div class="side">Side</div>
</div>

My answer maybe yes for the fun only.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thanks for your answer! It is not yet there, but already very close to what I'd like to achieve. – totkeks Dec 03 '19 at 21:46
  • @totkeks actually, auto-fit will do , i did not expect `grid-template-columns: repeat(auto-fit, minmax(22rem,auto));` to work with auto as for a value. https://codepen.io/gc-nomade/pen/VwYYbxP – G-Cyrillus Dec 03 '19 at 22:10
  • Nice! Only thing missing now is that the main should collapse, when it is smaller than 48rem and not 22rem. – totkeks Dec 03 '19 at 22:19
  • @totkeks mediaquerie is there for this , here once you reached 22rem for each col it will collapse into a single column, :( – G-Cyrillus Dec 03 '19 at 22:35