Question

我正在尝试创建响应式布局，但我不知道如何使其具有响应性。

我想要2 列，每列有3 行（大小相同）。

当屏幕小于 768px 时，列应逐行显示。我找到了使用媒体查询的解决方案，但这是实现这一目标的正确方法吗？

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(30rem, 1fr));
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  margin: 0 12rem;
}

.box {
  padding: 20px;
  font-size: 30px;
  background-color: rebeccapurple;
}


@media (max-width: 767px) {
  .features {
    display: grid;
    grid-template-columns: 1fr;
  }
}

<div class="features">
        <div class="box">BOX 1</div>
        <div class="box">BOX 2</div>
        <div class="box">BOX 3</div>
        <div class="box">BOX 4</div>
        <div class="box">BOX 5</div>
        <div class="box">BOX 6</div>
      </div>

Answer 1

如何使用 @Media 查询？

@media (max-width: 768px) {
  .features {
    display: grid;
    grid-template-areas: repeat(1, minmax(30rem, 1fr));
    grid-gap: 3rem;
    margin: 0 12rem;
  }
  
  .box {
    padding: 20px;
    font-size: 30px;
    background-color: rebeccapurple;
  }
}

@media (min-width: 768px) {
  .features {
    display: grid;
    grid-template-columns: repeat(2, minmax(30rem, 1fr));
    grid-gap: 3rem;
    margin: 0 12rem;
  }
  
  .box {
    padding: 20px;
    font-size: 30px;
    background-color: rebeccapurple;
  }
}

代码需要一些自定义/优化，但您应该明白。如果您需要一些示例或来源：

https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries https://thoughtbot.com/blog/concise-media-queries-with-css-grid

Answer 2

我刚刚为此创建了一个小提琴。是的，你是对的。媒体查询是最好的解决方案。

只需创建 x 个 div 并使用函数 grid-template-columns: repeat(2, 1fr) 划分它们，您可以在其中定义一行需要多少个项目。

Here is the link for fiddle.

如何使用 CSS GRID 创建响应式布局 2x3

2 个答案: