两列网格应换成一列网格 [英] Two-Column grid should wrap into One-Column grid

问题描述

在我的CSS网格中，左列中有一个大项目，右列中有三个小项目：

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>

现在在较小的屏幕上，右边的三个项目消失了，只有黑色的可见。这是因为我在 grid-template-rows中精确声明了3行：repeat（3，200px）; ，对吗？

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?

但是我想要的是所有4个项目都互相包裹（例如，网格应具有1列和6行）：

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.

我尝试了 grid-template-rows：repeat（auto-fit，200px），但这没有提供理想的结果。

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

感谢您的帮助！

推荐答案

您可以尝试

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

3条黑线-3条彩色线

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条黑线和3条彩色线

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.

这篇关于两列网格应换成一列网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！