CSS Grid - 响应式 - 多个 3 列行到 2 列行

Question

我正在创建一个包含多行和 3 列网格的页面，但在平板电脑中，更改为 2 列网格和移动 1 列网格。

在 Tablet 中，当创建 2 列网格时，它会在末尾创建一个空列。

是否可以连接两行，所以第二行占据第一行的空位？

或者唯一的可能是列被组织在一行中？

<div class="block-container grid-3-cols_wrapper">
   <!-- Row 1 -->
   <div class="has-3-columns">
      <!-- Col 1 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 2 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 3 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

   <!-- Row 2 -->
   <div class="has-3-columns">
      <!-- Col 1 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 2 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 3 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>
</div>

Answer 1

希望这能让你朝着正确的方向前进。

我已经完成了CSS，所以它可以移动了。所以第一个媒体查询是针对平板电脑的，第二个是针对台式机的，width: 100% 是针对移动设备的，所以显然会显示一列。您可以修改它以适合您的需要。玩弄它，任何问题评论，我会看看:)

FlexBox 方法

flex-direction flex-direction CSS 属性设置 flex 项目如何放置在定义主轴和方向（正常或反向）的 flex 容器中。看看例子here

flex-flow flex-flow CSS 属性是 flex-direction 和 flex-wrap 属性的简写属性。阅读here

justify-contentCSS justify-content 属性定义了浏览器如何沿着 flex 容器的主轴和网格容器的内联轴在内容项之间和周围分配空间。阅读here

.grid-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.grid-item {
  display: flex;
  background-color: orange;
  width: calc(100% - 10px);
  margin: 5px
}

@media (min-width: 720px) {
  .grid-item {
    width: calc(33.333% - 10px);
  }
}

@media (min-width: 1020px) {
  .grid-item {
    width: calc(25% - 10px);
  }
}

<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

请记住，如果您将边距值更改为 20px，那么您还必须更改 width 值，因为它正在这样做：

width: calc(grid-item-desired-width% - margin);

我真的建议阅读上面的链接，因为它们都有交互式演示，这将为您提供这些 flexbox 属性如何工作的直观示例。我还建议只使用 flex-box 并尝试不同的值以查看它们在您的网格上的作用。这是学习它并将其牢牢记住的最好方法。希望以上内容对您有所帮助。

CSS 网格方法

另一种方法是使用CSS Grid。不确定你想要什么方式，但我个人会选择 flexbox。如果你想要它下面是 CSS 网格方法

.grid-container {
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
  grid-gap: 10px 10px;
}

.grid-item {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

@media (min-width: 720px) {
  .grid-container {
    grid-template-columns: auto auto auto;
  }
}

@media (min-width: 1020px) {
  .grid-container {
    grid-template-columns: auto auto auto auto;
  }
}

<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

Answer 2

使用 Flex 肯定会更好。 Flex 是……更灵活。 Gris 通常是一组布局。

.flex-grid {
  display: flex;
}
.flex-grid .col {
  flex: 1;
}

.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background-color: #135;
  color: white;
  font-family:Verdana, Geneva, sans-serif;
  font-size: 150%;
  margin: 0px 5px 5px 5px;
  border-radius: 5px;
  padding: 20px;
}
   

 <div class="flex-grid">
  <div class="col">Column A</div>
  <div class="col">Column B</div>
  <div class="col">Column C</div>
  <div class="col">Column D</div>
</div>

<div class="flex-grid">
  <div class="col">Column E</div>
  <div class="col">Column F</div>
  <div class="col">Column G</div>
</div>

<div class="flex-grid">
  <div class="col">Column H</div>
  <div class="col">Column I</div>
</div>

<div class="flex-grid">
  <div class="col">Column J</div>
</div>

希望这会有所帮助！现在您只需要针对特定​​屏幕尺寸的 @Media 查询。