我正在尝试制作一个底部有一个完整跨度行的网格。
对于全跨列,我可以使用grid-column: 1/-1
.
对于单跨列,我可以使用grid-column: 1/1
.
对于单跨行,我可以使用grid-row: 1/1
.
但是如果我想定义最后一列或最后一行,我必须写grid-column: -2/-1
.
为什么语法与第一列/行的 1/1 不同?还是我在某个地方犯了错误?
我还制作了一个 jsfiddle 来演示我的问题:jsfiddle
.grid-container {
display: grid;
grid-template-columns: 5px 1fr 1fr;
grid-template-rows: minmax(50px, 2fr) 1fr 1fr 1fr 1fr 1fr 15px;
}
.grid-item {
width: 1fr;
}
.header {
display: flex;
grid-column: 2/-1;
grid-row: 1/1;
justify-content: center;
}
.border-left {
background: purple;
grid-column: 1/1;
grid-row: 1/-1;
}
.border-bottom {
background: #410266;
grid-column: 2/-1;
/* grid-row: -2 / -1; this will …
Run Code Online (Sandbox Code Playgroud)