web-dev-qa-db-ja.com

CSSグリッドの特定の要素の行/列のギャップ？

CSSグリッドを使用して以下のグリッドを作成しましたが、すべてのグリッド要素にユニバーサルギャップを適用するのではなく、グリッド内の特定の要素間にのみギャップを設けることができるかどうか疑問に思っています。ここに私が今持っているものがあります：

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
}

  .box {
    background-color:#444;
    color:#fff;
    padding:20px;
    font-size:150%;
  }
    .a {
      grid-column: col / span 2;
      grid-row: row 1 / 3;
    }
    .b {
      grid-column: col 3 / span 1;
      grid-row: row ;
    }
    .c {
      grid-column: col 3 / span 1;
      grid-row: row 2 ;
    }
    .d {
      grid-column: col / span 1;
      grid-row: row 3;
    }
    .e {
      grid-column: col 2 / span 1;
      grid-row: row 3;
    }
    .f {
      grid-column: col 3 / span 1;
      grid-row: row 3;
    }
    .g {
      grid-column: col / span 1;
      grid-row: row 4;
    }
    .h {
      grid-column: col 2 / span 1;
      grid-row: row 4;
    }
    .i {
      grid-column: col 3 / span 1;
      grid-row: row 4;
    }
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

右側の上の2行とその下の行の各セルの間のギャップを削除したいと思います。デスクトップではレイアウトが異なるため、現在のセルは分割したままにしておきます。これが私がしようとしていることのグラフィカルな表現です：

enter image description here

cssgridcss-grid
7
user13286

それは不可能だ。 grid-item:nth-child(n)を使用して特定のグリッドアイテムを参照し、負のマージンを設定できます。

5
Vladimir.V.Bvn

私はあなたの望ましい結果を得るための回避策を持っています。 3つの行すべてを別のグリッドセクションに移動しました。それが役立つかどうかはわかりませんが、ここにあります：

body {
  margin: 40px;
}

.wrapper1 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
  margin-bottom: 10px;
}
.wrapper2 {
  display: grid;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
  margin-bottom: 10px;
}

.wrapper3 {
  display: grid;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
  margin-bottom: 10px;
}

.box {
  background-color:#444;
  color:#fff;
  padding:20px;
  font-size:150%;
}
.a {
  grid-column: col 1 / span 2;
  grid-row: row 1 / 3;
}

.b {
  grid-column: col 3 / span 1;
  grid-row: row ;
}

.c {
  grid-column: col 3 / span 1;
  grid-row: row 2 ;
}

.d {
  grid-column: col 1 / span 1;
  grid-row: row 3;
  width: 80%;
}

.e {
  grid-column: col 2 / span 1;
  grid-row: row 3;
  width: 80%;
}

.f {
  grid-column: col 3 / span 1;
  grid-row: row 3;
  width: 80%;
}

.g {
  grid-column: col 1 / span 1;
  grid-row: row 4;
  width: 80%;
}

.h {
  grid-column: col 2 / span 1;
  grid-row: row 4;
  width: 80%;
}

.i {
  grid-column: col 3 / span 1;
  grid-row: row 4;
  width: 80%;
}
<div class="wrapper1">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
</div>
<div class="wrapper2">
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
</div>
<div class="wrapper3">
    <div class="box g">G</div>
    <div class="box h">H</div>
    <div class="box i">I</div>
</div>
0
Aagam Jhaveri