Two-Column grid should wrap into One-Column grid

问题

In my css grid I have one large item in the left column and three smaller items in the right column:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: column;
}

.item-1 {
  background-color: black;
  grid-column: span 1;
  grid-row: span 3;
}

.item-2,
.item-3,
.item-4 {
  grid-column: span 1;
  grid-row: span 1;
}

.item-2 {
  background-color: deeppink;
}

.item-3 {
  background-color: yellow;
}

.item-4 {
  background-color: blue;
}

<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
</div>

Now on smaller screens the three items on the right just disappear and only the black one is visible. This is because I have declared exactly 3 rows in grid-template-rows: repeat(3, 200px);, correct?

What I want however is that all 4 items wrap under each other (e.g. the grid should have 1 column and 6 rows):

I know that this could be reached using media queries, but I wanted to avoid those in this scenario if possible.

I have tried grid-template-rows: repeat(auto-fit, 200px) but this didn't provide the desired result.

Thanks for you help!

回答1:

you could try

.container {
    display: grid;
    grid-template-areas: 'a a';
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(3, 50px);
    grid-auto-flow: column; 
}

3 Black Lines - 3 color lines

@media only screen and (max-width: 600px) {
   .container {
     grid-template-areas: 'a';
     grid-template-columns: 100%;
     grid-template-rows: repeat(6, 50px);
   }
}

1 Black line and 3 Color lines

@media only screen and (max-width: 600px) {
   .container {
     grid-template-areas: 'a';
     grid-template-columns: 100%;
     grid-template-rows: repeat(4, 50px);
   }

  .item-1 {
    grid-row: span 1;
  }
}

You can set the width for the media query as you want.

来源：https://stackoverflow.com/questions/59840234/two-column-grid-should-wrap-into-one-column-grid

标签

css

css-grid