CSS Grid: Можно ли применить цвет к разрыву сетки?

Есть ли способ стилизовать больше, чем просто ширина зазоров сетки в модуле макета сетки CSS? Я не могу найти ничего об этом в документации, однако можно было бы подумать, что это будет возможно, поскольку разрывы сетки имеют тенденцию быть окрашенными во многих проектах. Если это невозможно, есть ли обходной путь?

Ответ 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>'