web-dev-qa-db-ja.com

CSSグリッド：グリッドのギャップに色を適用することは可能ですか？

CSSグリッドレイアウトモジュール内のグリッドギャップの幅以上のスタイルを設定する方法はありますか？私はドキュメントでそれについて何も見つけることができませんが、多くのデザインではグリッドのギャップが色付けされる傾向があるので、それは可能だと思う傾向があります。それが不可能な場合、回避策はありますか？

csscss-grid
24
Taishi

残念ながら、現在CSSグリッドの仕様にはgrid-gap。 htmlとcssだけが関係するものの、うまく機能するソリューションを思い付きました： 要素間にのみボーダーグリッドラインを表示します

6
eriklharper

たとえば、5x5の正方形のグリッドがある場合、グリッドを25個の要素で塗りつぶし、それらの同じ要素に境界線を適用する色付きのグリッド線を取得する唯一の方法はありますか？

あなたはそれを行うことができますが、グリッドボーダーはborder-collapseプロパティを使用してテーブルボーダーと同じように折りたたむことはできません。望ましくない。さらに、grid-gap宣言がある場合、border-collapse: separateが表の境界線で行うのと同じように、ギャップがグリッド項目の境界線を分離します。

grid-gapは、グリッドアイテムを配置するための慣用的なアプローチですが、グリッドのギャップは物理的なボックスではなく空のスペースであるため、理想的ではありません。そのため、これらのギャップに色を付ける唯一の方法は、グリッドコンテナに背景色を適用することです。

7
BoltClock

代わりに 上記のソリューション を使用する代わりに、疑似クラスでborderを使用することをお勧めします。 「テーブル」の終わり。

enter image description here

「テーブルセル」の間に境界線を使用したいが、常に同じ量のセルがない場合は、次のようなことができます（この例はflexboxでも機能します）。

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* with flexbox:
  display: flex;
  flex-wrap: wrap;
  */
}

/* Add border bottom to all items */
.item {
  padding: 10px;
  border-bottom: 1px solid black;
  /* with flexbox:
  width: calc(50% - 21px);
  */
}

/* Remove border bottom from last item & from second last if its odd */
.item:last-child, .item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* Add right border to every second item */
.item:nth-child(odd) {
  border-right: 1px solid black;
}
<div class="wrapper">
  <div class="item">BOX 1</div>
  <div class="item">BOX 2</div>
  <div class="item">BOX 3</div>
  <div class="item">BOX 4</div>
  <div class="item">BOX 5</div>
</div>
5
Jan Fässler

境界色を背景色としてグリッドに追加し、すべてのグリッド項目に背景色を追加しました。

.grid {
  width: 1000px;
  display: grid;
  background: #D7D7D7;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 1px;
}

.grid-item {
  background: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</body>

</html>

これは私のために動作します。

1
michael

グリップの代わりに境界線を使用するか、背景色を変更することができます（機能する場合）。

.yourDiv {
    border-right: 5px solid rgb(110, 0, 210);
    border-top: 10px solid rbg(255, 255, 0);
}

それが役に立てば幸い！

0
Elias

グリッドに背景色を設定すると、ギャップに色が付けられます。例えば：

    section {
            display: grid;
            grid-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background-color: red;
        }
0
Milan Kosir