css 中的布局网格项目

Question

我只是想知道什么是最好的项目布局方式，以便我可以在附件中显示相同的结果，或者这背后的技巧是什么。

Answer 1

你可以从下面的代码中得到启发：

.container {
  display: flex;
  align-items: center;
  gap:8px;
}

.container .item {
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.inner-item {
  width:60px;
  height:60px;
  background-color:red;
}

<div class="container">
  <div class="item">
    <div class="inner-item">
    
    </div>
  </div>
  <div class="item">
    <div class="inner-item">
    
    </div>
    <div class="inner-item">
    
    </div>
  </div>
</div>

Answer 2

我发现 CSS 网格对于这种 x/y 方向布局是最直观的。使用 grid-template-areas 是一种有趣的布局方式，因为您基本上可以创建您喜欢的任何布局，然后将类分配给您用于网格区域的任意名称。点（.）表示网格区域为空。

虽然这完全可以使用 flex 来完成，但所需的额外标记是不可取的。我认为使用 grid.

需要控制 x 轴和 y 轴的任何布局都更加直观和可扩展

.grid {
  display: inline-grid;
  gap: 0.75rem;
  grid-template-areas:
                       ". item2"
                       ". item2"
                       "item1 item2"
                       "item1 item2"
                       "item1 item3"
                       "item1 item3"
                       ". item3"                       
                       ". item3";                       
}

.item {
  background-color: green;
  color: ghostwhite;
  width: 100px;
  height: 100px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

<div class="grid">
  <div class="item item1">item 1</div>
  <div class="item item2">item 2</div>
  <div class="item item3">item 3</div>  
</div>

jsFiddle

Answer 3

CSS 网格在二维 space.

中为您提供了很多控制

我们需要 3 个网格项的相对尺寸。

测量给定的布局后，我发现第一张图片的宽度为 7 厘米，第二张（顶部）图片的宽度为 6 厘米，右下角图片的宽度为 6.5 厘米。而且它们是正方形的。

网格在列和行中工作，因此我们需要找到合适的列宽。 (7 + 6.5) = 13.5 所以乘以 2 得到列数，网格项将分别填充 14、12、13 列。

所以要得到这个：

我们可以做到：

.pics {
  display: grid;
  grid-template-columns: repeat(27, 1fr);
  grid-template-rows: repeat(27, 1fr);
  gap: 2vmin;
  width: 50vmin;
  aspect-ratio: 1 / 1;
}

.pics>div {
  width: 100%;
  height: 100%;
  border-radius: 2vmin;
}

.pics>*:nth-child(1) {
  background: magenta;
  grid-column: 1 / span 14;
  grid-row: 5 / span 14;
}

.pics>*:nth-child(2) {
  background: cyan;
  grid-column: 15 / span 12;
  grid-row: 1 / span 12;
}

.pics>*:nth-child(3) {
  background: yellow;
  grid-column: 15 / span 13;
  grid-row: 13 / span 13;
}

<div class="pics">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css 中的布局网格项目

Layout grid items in css

css

flexbox

grid

responsive