5

I am trying to get CSS Grid blocks to stack on top of each other when viewed on small screens. I know I can write media queries to change two columns to one. But I thought Grid could handle this without them?

I thought I could achieve this with auto-fit on columns. However, I think I may of misunderstood how this works?

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "leftCol rightTop" "leftCol rightBottom";
  height: 100vh;
}

.leftCol {
  grid-area: leftCol;
  background-color: pink;
  width: 100%;
  height: 100;
}

.rightBottom {
  grid-area: rightBottom;
  background-color: yellow;
  width: 100%;
  height: 100;
}

.rightTop {
  grid-area: rightTop;
  background-color: blue;
  width: 100%;
  height: 100;
}
<div class="grid-container">
  <div class="leftCol"></div>
  <div class="rightBottom"></div>
  <div class="rightTop"></div>
</div>

When the screen is below 400px, the right hand column just disappears. I was expecting them to stack on top of each other.

For example:

Grid mock up

CodePen Example

5
  • Why would you not want the control that media queries will provide you with?
    – Mike Poole
    Jul 12, 2019 at 16:42
  • I would ask, why write them when they are not required? Look Ma, No Media Queries! Jul 12, 2019 at 16:46
  • Also, maybe use flexbox instead of grid css-tricks.com/snippets/css/a-guide-to-flexbox
    – Keith
    Jul 12, 2019 at 16:48
  • I have this working in Flexbox, but I trying to understand how to achieve this in CSS Grid Jul 12, 2019 at 16:51
  • try looking at the grid behavior when you don't have grid-template-areas or any of the grid-area definitions - you'll see the grid items stacking as the window size reduces...
    – kukkuz
    Jul 12, 2019 at 17:01

2 Answers 2

3

I am trying to get CSS Grid blocks to stack on top of each other when viewed on small screens. I know I can write media queries to change two columns to one. But I thought Grid could handle this without them? I thought I could achieve this with auto-fit on columns.

You can.

Here you go:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 50%;
  height: 100vh;
}

.leftCol     { background-color: pink; }
.rightBottom { background-color: yellow; }
.rightTop    { background-color: blue; }
body         { margin: 0; }
<div class="grid-container">
  <div class="leftCol"></div>
  <div class="rightBottom"></div>
  <div class="rightTop"></div>
</div>

revised codepen


Here's the problem with your original code:

The repeat() function allows you to render a pattern of tracks in the grid container.

With auto-fit or auto-fill, the repeat() function will render as many tracks as possible without overflowing the container.

By itself, your code works as you expect, as illustrated above.

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))

With this rule, the grid items stack into a single column on smaller screens.

However, when you introduce explicit columns and rows, this interferes with the ability of repeat() and auto-fit to do their job.

grid-template-areas: "leftCol rightTop" "leftCol rightBottom"

This rule tells grid items where they need to be, stunting repeat().

grid-template-rows: 1fr 1fr

This rule creates a two-row limit in the container, pushing the third item off-screen.

In a nutshell, don't add rules that interfere with repeat() / auto-fit. If you need a more sophisticated layout, then use media queries.

-6

try using

css:

.grid-container div {
    display: inline-block;
    float: left;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.