CSS 布局 - 网格或 flex [关闭]答案

【问题标题】：CSS layout - grid or flex [closed]CSS 布局 - 网格或 flex [关闭]
【发布时间】：2021-08-03 07:18:59
【问题描述】：

我正在尝试创建此布局。 https://pasteboard.co/K1C5o3k.jpg

我尝试使用 display: grid 但间距很奇怪。最好的解决方案是什么？使用网格还是弹性框？如何使用网格或 flexbox 实现这种间距？

<div class="wrap">
  <div class="test-grid">
    <div class="card box1">some text</div>
    <div class="card box2">some text</div>
    <div class="card">some text</div>
    <div class="card box4">some text</div>
  </div>
</div>

.wrap {
  max-width: 600px;
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1em;
}
.card {
  background-color: tomato;
  width: 160px;
  min-height: 220px;
}
.box1 {
  margin-top: 40px;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
stackoverflow.com/questions/65804045/…
CSS Grid 和 Flexbox 通常都能完成工作，但在普通情况下的使用方式有所不同。在 caniuse.com 上搜索它们通常会链接到有用的信息。

标签： html css layout

【解决方案1】：

在您的网格布局上，我使用 grid-template-row/columns 来定义分数数量，然后使用 grid-template-areas 来布局元素，对于您想要将唯一类定义为其网格区域的每个子元素.您可以使用 gap 来控制元素之间的间距。为父元素定义高度和宽度后，子元素将填充它们各自的 fraction，以及任何定义的间隙。

然后为您的移动布局使用带有 flex 的媒体查询。您可能需要稍微调整一下 CSS 以使其看起来像您想要的那样，但下面的示例应该可以解决问题。

.test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-template-areas:
    ". two ." 
    "one two four" 
    "one three four" 
    ". three .";
  width: 100vw;
  height: 100vh;
}

.one {
  grid-area: one;
 background-color: tomato;
}

.two {
  grid-area: two;
  background-color: tomato;
}

.three {
  grid-area: three;
  background-color: tomato;
}

.four {
  grid-area: four;
  background-color: tomato;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .test-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  
  .box {
    width: 100%;
    height: 100%;
  }
}

<div class="test-grid">
  <div class="one box">some text</div>
  <div class="two box">some text</div>
  <div class="three box">some text</div>
  <div class="four box">some text</div>
</div>

【讨论】：

【解决方案2】：

这是一个仅使用网格的选项。在此示例中，我们创建了许多小的网格行（每个 10 像素），然后您可以从特定行开始每个元素并以 10 像素为增量调整框。

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 160px);
  grid-template-rows: repeat(45, 10px);
  column-gap: 10px;
}
.card {
  background-color: tomato;
  width: 160px;
  min-height: 220px;
}
.box1 {
  grid-row-start: 10;
}
.box2 {
  grid-row-start: 0;
  grid-column-start: 2;
}
.box3 {
  grid-row-start: 24;
  grid-column-start: 2;
}
.box4 {
  grid-row-start: 8;
  grid-column-start: 3;
}

<div class="wrap">
  <div class="test-grid">
    <div class="card box1">some text</div>
    <div class="card box2">some text</div>
    <div class="card box3">some text</div>
    <div class="card box4">some text</div>
  </div>
</div>

【讨论】：

【解决方案3】：

Grid 和 flex 都可以完成这项工作，这取决于您的偏好。

当屏幕变小（小于 500 像素）时，下面的代码片段就可以解决问题。网格将显示为列表。

.wrap {
  max-width: 600px;
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1em;
}
.card {
  background-color: tomato;
  width: 160px;
  min-height: 220px;
}

.box1 {
    grid-column: 1/span 1;
    grid-row: 2/span 2;
}
.box2 {
  grid-column: 2/span 2;
    grid-row: 1/span 1;
}
.box3 {
  grid-column: 3/span 2;
    grid-row: 2/span 2;
}
.box4 {
  grid-column: 2/span 2;
    grid-row: 3/span 3;
}

@media (max-width: 500px) {
  .test-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

<div class="wrap">
 <div class="container">
  <div class="test-grid">
    <div class="card box1">box1</div>
    <div class="card box2">box2</div>
    <div class="card box3">box3</div>
    <div class="card box4">box4</div>
  </div>
</div>

【讨论】：