CSSグリッドレイアウトモジュール内のグリッドギャップの幅以上のスタイルを設定する方法はありますか?私はドキュメントでそれについて何も見つけることができませんが、多くのデザインではグリッドのギャップが色付けされる傾向があるので、それは可能だと思う傾向があります。それが不可能な場合、回避策はありますか?
残念ながら、現在CSSグリッドの仕様にはgrid-gap
。 htmlとcssだけが関係するものの、うまく機能するソリューションを思い付きました: 要素間にのみボーダーグリッドラインを表示します
たとえば、5x5の正方形のグリッドがある場合、グリッドを25個の要素で塗りつぶし、それらの同じ要素に境界線を適用する色付きのグリッド線を取得する唯一の方法はありますか?
あなたはそれを行うことができますが、グリッドボーダーはborder-collapse
プロパティを使用してテーブルボーダーと同じように折りたたむことはできません。望ましくない。さらに、grid-gap
宣言がある場合、border-collapse: separate
が表の境界線で行うのと同じように、ギャップがグリッド項目の境界線を分離します。
grid-gap
は、グリッドアイテムを配置するための慣用的なアプローチですが、グリッドのギャップは物理的なボックスではなく空のスペースであるため、理想的ではありません。そのため、これらのギャップに色を付ける唯一の方法は、グリッドコンテナに背景色を適用することです。
代わりに 上記のソリューション を使用する代わりに、疑似クラスでborder
を使用することをお勧めします。 「テーブル」の終わり。
「テーブルセル」の間に境界線を使用したいが、常に同じ量のセルがない場合は、次のようなことができます(この例は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>
境界色を背景色としてグリッドに追加し、すべてのグリッド項目に背景色を追加しました。
.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>
これは私のために動作します。
グリップの代わりに境界線を使用するか、背景色を変更することができます(機能する場合)。
.yourDiv {
border-right: 5px solid rgb(110, 0, 210);
border-top: 10px solid rbg(255, 255, 0);
}
それが役に立てば幸い!
グリッドに背景色を設定すると、ギャップに色が付けられます。例えば:
section {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: red;
}