相关疑难解决方法(0)

了解网格负值

我正在尝试制作一个底部有一个完整跨度行的网格。

对于全跨列,我可以使用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)

html css css-grid

5
推荐指数
2
解决办法
1463
查看次数

标签 统计

css ×1

css-grid ×1

html ×1