css - 将 block 元素添加到自定义网格

Question

我有一个包含 6 个 block 的页面

block 1                   block 5
block 2
block 3                   block 6
block 4

这里 block 1和 block 5是位置相同的网格。所以我想要这样的页面所以我尝试了

.item-list ul li {
    margin: 0;
    padding: 0.2em 0.5em 0 0;
}

.block-5 {
    position: absolute;
    margin-left: 460px !important;
    margin-top: -1681px !important;
}

我的问题是，如果我在 block 4 下面添加另一个 block ，比如 block 7，查看页面显示会困惑，然后我想再次更改 margin-top: -1681px !important; 位置。我该如何解决这个问题？请帮忙。

Answer 1

您需要的是一个可靠的解决方案，它由 CSS Grid 提供。我添加了额外的 block 7 并通过 CSS 注释对其进行了解释。你可以玩Grid Generator .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.area1 {
  grid-area: 1 / 1 / 2 / 2;
}

.area2 {
  grid-area: 2 / 1 / 3 / 2;
}

.area3 {
  grid-area: 3 / 1 / 4 / 2;
}

.area4 {
  grid-area: 4 / 1 / 5 / 2;
}

.area5 {
  grid-area: 1 / 2 / 2 / 3;
}

.area6 {
  grid-area: 3 / 2 / 4 / 3;
}

/* Additional Block */

.area7 {
  grid-area: 5 / 1 / 6 / 2; /* Start at Row 5, Start at Column 1, Stop at Row 6, Stop at Column 2 */
}

/* Unrequired Snippet Styling */
div[class^="area"]{
  background: #5548B0;
  color: white;
  padding: 10px;
}

<div class="container">
  <div class="area1">Block 1</div>
  <div class="area2">Block 2</div>
  <div class="area3">Block 3</div>
  <div class="area4">Block 4</div>
  <div class="area5">Block 5</div>
  <div class="area6">Block 6</div>
  <!-- Additional Block -->
  <div class="area7">Additional Block 7</div>
</div>