Скрытие границ с помощью CSS Grid

Мне нравится получать подсказку по новой спецификации CSS Grid, но у меня проблемы с границами.

Возможно ли свернуть границы в сетке CSS или есть способ стирать желоб?

Как вы можете видеть в нижеприведенном фрагменте, стек 10px границ (20px total) между блоками.

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

Мой фактический прецедент - это календарь, который я делаю, чтобы практиковать работу с компонентами Grids и React. Вы можете увидеть проблему, с которой я столкнулся:

Поскольку каждый месяц отличается, у меня будет много разных краевых дел.

.container {
  display: grid;
  grid-template-columns: 120px 120px;
  box-sizing: border-box;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  border: 10px solid palegreen;
}

.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

Ответы

Ответ 1

Вы можете использовать grid-gap или box-shadow:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

Ответ 2

Рассмотрите возможность управления всеми размерами и интервалами на уровне контейнера сетки, а не на уровне элемента сетки. Удалите границы и размеры, применяемые к элементам.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 1 */ /* 2 */
  grid-auto-rows: 100px; /* 3 */
  grid-gap: 5px; /* 4 */
  padding: 5px;
  background-color: tomato;
}

.block {
  background-color: lightgrey;
}

/* for demo only */
.block:nth-child(-n + 2) {
  visibility: hidden;
}

<div class='container'>
  <div class='block'>0</div>
  <div class='block'>0</div>
  <div class='block'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
  <div class='block'>8</div>
  <div class='block'>9</div>
  <div class='block'>10</div>
  <div class='block'>11</div>
  <div class='block'>12</div>
  <div class='block'>13</div>
  <div class='block'>14</div>
  <div class='block'>15</div>
  <div class='block'>16</div>
  <div class='block'>17</div>
  <div class='block'>18</div>
  <div class='block'>19</div>
  <div class='block'>20</div>
  <div class='block'>21</div>
  <div class='block'>22</div>
  <div class='block'>23</div>
  <div class='block'>24</div>
  <div class='block'>25</div>
  <div class='block'>26</div>
  <div class='block'>27</div>
  <div class='block'>28</div>
  <div class='block'>29</div>
  <div class='block'>30</div>
  <div class='block'>31</div>  
</div>

Ответ 3

Еще один подход, который вы могли бы предпринять, если бы вы были в порядке с цветом границы пробелов, который был таким же, как ячейки дня, которые не попадают на текущий месяц, - это обернуть div вокруг всего контейнера сетки и установить его background-color к цвету, в котором вы хотите, чтобы ваши границы были, и дайте ему 1px padding с помощью grid-gap 1px. При таком подходе вы можете добиться равномерно ограниченной сетки без сложностей использования теневой тени, которая кажется мне взломанной.

Ответ 4

Трюк, к которому я часто обращаюсь, это &::before { position: absolute } + calc чтобы делать все виды стилей. Здесь рушатся границы для чего угодно.

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

* {
  box-sizing: border-box;
}

body {
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

div {
  padding: 10px;

  // The magic 👇
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    border: 1px solid red;
  }
}

Codepen Demo