Мне нравится получать подсказку по новой спецификации 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>