css - 如何控制不同尺寸网格项之间的间隙?
问题描述
在下面的布局中,我希望 A 和 B 并列,并且 D 强制的所有间隙都在 B 和 C 之间。 justify/align-content/self/items 似乎没有任何效果。网格间隙也没有。
虽然这些物品有固定的尺寸,但普遍的问题不是:这些物品可能有不同的宽度。当 D 比 A + B 窄时,它们是并列的,但是当 D 比 A + B 宽时,我不知道如何保持 A 和 B 并列。
.container {
display: grid;
grid-template-areas: "a b c" "d d e";
width: min-content;
background-color: lightyellow;
}
.a {
grid-area: a;
width: 120px;
}
.b {
grid-area: b;
width: 40px;
}
.c {
grid-area: c;
width: 80px;
}
.d {
grid-area: d;
width: 300px;
}
.e {
grid-area: e;
width: 100px;
}
.a,
.b,
.c,
.d,
.e {
justify-self: start;
border: solid 1px black;
background-color: lightblue;
height: 40px;
}
<h1>floating grid items</h1>
<div class=container>
<div class=a>A</div>
<div class=b>B</div>
<div class=c>C</div>
<div class=d>D</div>
<div class=e>E</div>
</div>
解决方案
考虑一个模板列,您将第一个设置为 auto,第二个设置为1fr
. 您也可以考虑inline-grid
将宽度设置为min-content
.container {
display: inline-grid;
grid-template-areas:
"a b c"
"d d e";
grid-template-columns:auto 1fr auto;
background-color: lightyellow;
border:1px solid red;
}
.a {
grid-area: a;
width: 120px;
}
.b {
grid-area: b;
width: 40px;
}
.c {
grid-area: c;
width: 80px;
}
.d {
grid-area: d;
width: 300px;
}
.e {
grid-area: e;
width: 100px;
}
.a,
.b,
.c,
.d,
.e {
justify-self: start;
border: solid 1px black;
background-color: lightblue;
height: 40px;
}
<h1>floating grid items</h1>
<div class=container>
<div class=a>A</div>
<div class=b>B</div>
<div class=c>C</div>
<div class=d>D</div>
<div class=e>E</div>
</div>
或者你可以考虑max-content
宽度并保持display:grid
.container {
display: grid;
grid-template-areas:
"a b c"
"d d e";
grid-template-columns:auto 1fr auto;
background-color: lightyellow;
border:1px solid red;
width:max-content;
}
.a {
grid-area: a;
width: 120px;
}
.b {
grid-area: b;
width: 40px;
}
.c {
grid-area: c;
width: 80px;
}
.d {
grid-area: d;
width: 300px;
}
.e {
grid-area: e;
width: 100px;
}
.a,
.b,
.c,
.d,
.e {
justify-self: start;
border: solid 1px black;
background-color: lightblue;
height: 40px;
}
<h1>floating grid items</h1>
<div class=container>
<div class=a>A</div>
<div class=b>B</div>
<div class=c>C</div>
<div class=d>D</div>
<div class=e>E</div>
</div>
推荐阅读
- php - 订单过滤 - PrestaShop API
- java - JAVA 中的元素顺序(导入 javax.xml.*)
- jenkins - 为数组中的字符串添加双引号
- python - Pandas ImportError:当我尝试读取 .csv 文件时无法导入名称“OrderedDict”
- python - Pandas:将平均值分配给一个类别
- sql - 如何获取 SQL 数据正常的第一行
- node.js - 无法读取未定义的属性,但可以将其记录到控制台
- javascript - Three.JS中使用switch语句加载多个对象
- google-app-engine - Flask 在 Google App Engine 上返回 500?
- laravel-5.8 - 如何更改 Auth::routes(); 中的默认控制器地址?