我很喜欢学习新的CSS Grid规范,但我在边框方面遇到了一些问题。请问是否有可能在CSS Grid中折叠边框,或者有没有办法样式化gutter?正如您在下面的片段中所看到的,
因为每个月都不同,我需要考虑很多不同的边缘情况。
10px
边框在块之间堆叠(总共为20px
)。我知道这个问题不是CSS Grid独有的,但我希望它能够为创建所有框之间的统一10px边框和外部边缘提供新的解决方案。我的实际用例是一个日历,我正在练习使用Grids和React组件。您可以在此处查看我遇到的问题:![CSS Grid Calendar](https://istack.dev59.com/RrCX2.webp)
.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>
border-collapse: collapse
。 - Ciantic