CSS 布局 - 网格或弹性

Question

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

我尝试使用 display: grid 但间距很奇怪。什么是最好的解决方案？使用网格还是 flexbox？如何使用网格或 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;
}

Answer 1

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>

Answer 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>

Answer 3

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

然后为您的移动布局使用带有 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>

CSS 布局 - 网格或弹性

CSS layout - grid or flex

html

css

layout