将块元素添加到自定义轴网

Question

我有一个有6个区块的页面，比如

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

这里，块1和块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;
}

我的问题是，如果我在块4下面添加另一个块，例如块7，查看页面显示将混乱，然后再次我想要更改margin-top: -1681px !important;位置。如何解决此问题？请帮帮忙。

Answer 1

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

​

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

​

Answer 2

你不能这样定义位置，这是不稳定的。

您需要在列中拆分块，然后每列的顶部块保持顶部对齐。

<div class="row">
  <div class="col">
    <div>block 1</div>
    <div>block 2</div>
    <div>block 3</div>
    <div>block 4</div>
  </div>
  <div class="col">
    <div>block 5</div>
    <div>block 6</div>  
  </div>
</div>

// css

.row{
  display:flex;
}

.col{
  flex-grow:1
}

这里有一把小提琴：https://jsfiddle.net/x2ohrwan/1/