使宽度为 1fr + 1fr = 2fr(有网格间隙)
Make the width of 1fr + 1fr = 2fr (with grid gap)
让前两列的总宽度与第三列的总宽度相同的正确方法是什么?如果我像这样把它们分开:
.grid {
display:grid;
grid-template-columns:1fr 1fr 2fr;
grid-gap:2em;
}
<div class="grid">
<div class="small">Col 1</div>
<div class="small">Col 2</div>
<div class="large">Col 3</div>
</div>
此处示例:https://codepen.io/shorty2240/pen/baGYoW
我假设我可以在这个下面再做一个网格,具有相同的网格间隙,1fr 1fr,它会排成一行,但显然不会。
我想尽可能避免嵌套前两项,因为实际项目会自动输出这三项,而环绕前两项可能会有问题。
您应该将网格设置为 4 列宽,并将您的 .large
定义为用完 2 列。
这实际上与流行的 css 框架(如 bootstrap 和 foundation)中的专栏工作一致。
grid-template-columns:1fr 1fr 1fr 1fr;
.large {
grid-column-start: 3;
grid-column-end: 5;
}
或者使用任何 shorthand 语法来设置 4 列和网格列。
如@Rene 所述,定义了 4 列,但告诉 .large
div 跨越 2 列,而 .small
只有一列。
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.grid div {
background: grey;
height: 75px; /* for demo purposes */
}
.small {
grid-column: span 1;
}
.large {
grid-column: span 2;
}
<div class="grid">
<div class="small">Col 1</div>
<div class="small">Col 2</div>
<div class="large">Col 3</div>
<div class="large">Col 4</div>
<div class="large">Col 5</div>
</div>
让前两列的总宽度与第三列的总宽度相同的正确方法是什么?如果我像这样把它们分开:
.grid {
display:grid;
grid-template-columns:1fr 1fr 2fr;
grid-gap:2em;
}
<div class="grid">
<div class="small">Col 1</div>
<div class="small">Col 2</div>
<div class="large">Col 3</div>
</div>
此处示例:https://codepen.io/shorty2240/pen/baGYoW
我假设我可以在这个下面再做一个网格,具有相同的网格间隙,1fr 1fr,它会排成一行,但显然不会。
我想尽可能避免嵌套前两项,因为实际项目会自动输出这三项,而环绕前两项可能会有问题。
您应该将网格设置为 4 列宽,并将您的 .large
定义为用完 2 列。
这实际上与流行的 css 框架(如 bootstrap 和 foundation)中的专栏工作一致。
grid-template-columns:1fr 1fr 1fr 1fr;
.large {
grid-column-start: 3;
grid-column-end: 5;
}
或者使用任何 shorthand 语法来设置 4 列和网格列。
如@Rene 所述,定义了 4 列,但告诉 .large
div 跨越 2 列,而 .small
只有一列。
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.grid div {
background: grey;
height: 75px; /* for demo purposes */
}
.small {
grid-column: span 1;
}
.large {
grid-column: span 2;
}
<div class="grid">
<div class="small">Col 1</div>
<div class="small">Col 2</div>
<div class="large">Col 3</div>
<div class="large">Col 4</div>
<div class="large">Col 5</div>
</div>