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

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

16
css css-grid

4 ответов

к сожалению, в спецификации CSS Grid в настоящее время нет способа style grid-gap. Я придумал решение, которое работает хорошо, хотя это включает только html и css: показывать линии сетки границ только между элементами

4

например: если у вас есть сетка квадратов 5x5, это единственный способ получить цветные линии сетки, чтобы заполнить сетку 25 элементами и применить границы к тем же элементам?

вы можете сделать это, но границы сетки не сворачиваются так же, как границы таблицы могут с border-collapse свойство, и в отличие от зазоров сетки они будут применяться к периметру вашей сетки вместе с внутренними границами, что может быть нежелательно. Плюс, если у вас есть grid-gap декларации, пробелы будут отделять ваши границы элемента сетки так же, как border-collapse: separate С границы таблицы.

grid-gap - это идиоматический подход для элементов сетки интервалов, но он не идеален, поскольку пробелы сетки - это просто: пустое пространство, а не физические поля. С этой целью единственный способ раскрасить эти пробелы-применить цвет фона к контейнеру сетки.

5

использовать решение выше я рекомендую использовать border С псевдоклассами, потому что если у вас есть нерегулярное количество "ячеек таблицы", вы получите уродливую цветную ячейку в конце "таблицы".

enter image description here

Если вы хотите использовать границы между "ячейками таблицы", и у вас не всегда одинаковое количество ячеек, вы можете сделать что-то вроде этого (этот пример также будет работать с адаптируемых блоков):

.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>
1

вы можете использовать границы вместо ручки или просто изменить цвет фона, если это работает.

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

надеюсь, что это помогает!

0