Есть ли способ стилизовать больше, чем просто ширина зазоров сетки в модуле макета сетки CSS? Я не могу найти ничего об этом в документации, однако можно было бы подумать, что это будет возможно, поскольку разрывы сетки имеют тенденцию быть окрашенными во многих проектах. Если это невозможно, есть ли обходной путь?
CSS Grid: Можно ли применить цвет к разрыву сетки?
Ответ 1
К сожалению, в спецификации CSS Grid в стиле grid-gap
не существует способа. Я придумал решение, которое работает хорошо, хотя это включает только html и css: показывать линии границы сетки только между элементами
Ответ 2
Например: если у вас есть квадрат квадратов 5x5, это единственный способ получить цветные линии сетки, чтобы заполнить сетку 25 элементами и применить границы к тем же элементам?
Вы могли бы это сделать, но границы сетки не сворачиваются так же, как границы таблицы могут иметь свойство border-collapse
, и в отличие от разрывов сетки они будут применяться к периметру вашей сетки вместе с внутренними границами, что может быть нежелательным. Кроме того, если у вас есть объявление grid-gap
, пробелы будут разделять границы элементов сетки, как это делает border-collapse: separate
с границами таблицы.
grid-gap
- это идиоматический подход для разделения элементов сетки, но он не идеален, поскольку разрывы сетки - это просто: пустое пространство, а не физические поля. С этой целью единственный способ раскрасить эти промежутки - это применить цвет фона к контейнеру сетки.
Ответ 3
Вместо того, чтобы использовать решение выше, я рекомендую использовать 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>
Ответ 4
Я добавил цвет рамки как цвет фона к сетке и добавил цвет фона ко всем элементам сетки.
.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>
Ответ 5
Вы можете использовать границы вместо захвата или просто менять цвет фона, если это работает.
.yourDiv {
border-right: 5px solid rgb(110, 0, 210);
border-top: 10px solid rbg(255, 255, 0);
}
Надеюсь, что это поможет!
Ответ 6
Установка цвета фона на сетке закрасит ваши пробелы. Например:
section {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: red;
}
Ответ 7
может быть, это решение поможет вам: https://codepen.io/skaya/pen/qBWwMXB
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
column-gap: 1px;
row-gap: 1px;
overflow: hidden;
}
.item {
padding: 16px 40px;
box-shadow: 0 0 0 1px #E5E5EA;
}
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>
Ответ 8
Это было какое-то время, но мне удалось заставить его работать: Я поместил фон в свой контейнер с сеткой и зазор в сетке от толщины границы, которую я хочу получить, затем я добавил цвет фона в свои элементы индивидуально:
'.grade {
margin: 20px;
height: 220px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1px;
border-radius: 5px;
background: #DDDDDD;
box-shadow: 0px 0px 10px #DDDDDD;
}
.grade .item {
background: #fff;
}'
мой HTML:
'<div class="grade">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>'