具有固定跨度的框以填充整个列
Boxes with fixed span to fill entire column
我是第一次CSS-网格用户:
我试图实现的是拥有一个使用 3 列网格的灵活框系统,我可以简单地向其中添加 1、2 或 3 列大小的框;只用一个 class.
我试图通过这样做来实现这一点 https://codepen.io/mathil/pen/WXarXB :
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 12px;
width: 50%;
margin-right: auto;
margin-left: auto;
background: grey;
}
.card-fullspan {
grid-column: span 3;
}
.card-twothirdspan {
grid-column: span 2;
}
.card-thirdspan {
grid-column: span 1;
}
<div class="container">
<div class="card-fullspan" style="background: red">Fullspan</div>
<div class="card-twothirdspan" style="background:green">
twothirdspan
</div>
<div class="card-thirdspan" style="background:green">
thirdspan
</div>
</div>
我知道我必须跨度为 4,对于全跨度来说就是这样:
.card-fullspan {
grid-column: span 4;
}
但这当然不适用于其他两个,因为我无法通过其他框的组合得出 for 的总和。右侧总是会有 12px
装订线。
我知道可以为每个项目添加不同的 class 或 ID,但这不是理想的解决方案。
span
关键字计算 后续 条网格线。
所以在三列网格中,当您希望一个项目跨越整行时,您指定 span: 3
,而不是 span: 4
,这会创建一个额外的(隐式)列。
您的代码:
.card-fullspan {
grid-column: span 4; /* spans across 4 columns */
}
试试这个:
.card-fullspan {
grid-column: span 3; /* spans across 3 columns */
}
或者这个:
.card-fullspan {
grid-column: 1 / 4; /* spans from grid-column-line 1 to 4 (3 columns) */
}
或者这个:
.card-fullspan {
grid-column: 1 / -1; /* spans from grid-column-line 1 from the start side
to grid-column-line: 1 starting from the end side
(note: negative integers work only with explicit grids */
}
所有详细信息都在本节的规范中:
我是第一次CSS-网格用户:
我试图实现的是拥有一个使用 3 列网格的灵活框系统,我可以简单地向其中添加 1、2 或 3 列大小的框;只用一个 class.
我试图通过这样做来实现这一点 https://codepen.io/mathil/pen/WXarXB :
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 12px;
width: 50%;
margin-right: auto;
margin-left: auto;
background: grey;
}
.card-fullspan {
grid-column: span 3;
}
.card-twothirdspan {
grid-column: span 2;
}
.card-thirdspan {
grid-column: span 1;
}
<div class="container">
<div class="card-fullspan" style="background: red">Fullspan</div>
<div class="card-twothirdspan" style="background:green">
twothirdspan
</div>
<div class="card-thirdspan" style="background:green">
thirdspan
</div>
</div>
我知道我必须跨度为 4,对于全跨度来说就是这样:
.card-fullspan {
grid-column: span 4;
}
但这当然不适用于其他两个,因为我无法通过其他框的组合得出 for 的总和。右侧总是会有 12px
装订线。
我知道可以为每个项目添加不同的 class 或 ID,但这不是理想的解决方案。
span
关键字计算 后续 条网格线。
所以在三列网格中,当您希望一个项目跨越整行时,您指定 span: 3
,而不是 span: 4
,这会创建一个额外的(隐式)列。
您的代码:
.card-fullspan {
grid-column: span 4; /* spans across 4 columns */
}
试试这个:
.card-fullspan {
grid-column: span 3; /* spans across 3 columns */
}
或者这个:
.card-fullspan {
grid-column: 1 / 4; /* spans from grid-column-line 1 to 4 (3 columns) */
}
或者这个:
.card-fullspan {
grid-column: 1 / -1; /* spans from grid-column-line 1 from the start side
to grid-column-line: 1 starting from the end side
(note: negative integers work only with explicit grids */
}
所有详细信息都在本节的规范中: