當開始grid-item為空且有grid-gap時對齊網格起點和終點-有解無憂

我正在嘗試創建一個列網格，其中每個網格項都有一些動態寬度，或者它也可以具有 0 寬度，但是由于使用了網格間隙，即使寬度為 0，也會產生間隙。

當開始 grid-item 為空且有 grid-gap 時對齊網格起點和終點

所以，如果你看到第三行，我們在綠色列之前有空白空間，在藍色列之后的第二行也是如此，如何避免這種情況？

演示

uj5u.com熱心網友回復：

僅基于您擁有標記和樣式的方式，快速修復是添加.child宣告和設定margin: 0 3px;（或任何有意義的大小），然后grid-gap: 0;在.item. 請參閱下面的片段。

body {
  font-family: sans-serif;
}

.item {
  display: grid;
  height: 20px;
  grid-gap: 0;
  margin-bottom: 5px;
  width: 200px;
}

.item1 {
  grid-template-columns: 50% 0px 50% 0;
}

.item2 {
  grid-template-columns: 0px 50% 0 50%;
}

.item3 {
  grid-template-columns: 25% 25% 25% 25%;
}

.child {
  margin: 0 3px;
}

.child1 {
  background-color: red;
}

.child2 {
  background-color: green;
}

.child3 {
  background-color: blue;
}

.child4 {
  background-color: black;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div class="grid">
        <div class="item item3">
          <div class="child child1"></div>
          <div class="child child2"></div>
          <div class="child child3"></div>
          <div class="child child4"></div>
        </div>
        <div class="item item1">
          <div class="child child1"></div>
          <div class="child child2"></div>
          <div class="child child3"></div>
          <div class="child child4"></div>
        </div>
        <div class="item item2">
          <div class="child child1"></div>
          <div class="child child2"></div>
          <div class="child child3"></div>
          <div class="child child4"></div>
        </div>
        <div class="item item3">
          <div class="child child1"></div>
          <div class="child child2"></div>
          <div class="child child3"></div>
          <div class="child child4"></div>
        </div>
      </div>
    </div>

  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365495.html

標籤：html css css网格

上一篇：如何從HTML底部制作全屏抽屜選單？

下一篇：使用jsoup提取資訊