CSS 网格。每个网格之间的不同间隙
CSS Grids. Different gap between each grid
我正在尝试在每个网格元素之间应用不同的间隙,例如我们有以下代码。 4 条网格线、3 个元素和每个网格框之间的 10px 宽度。如何在每个网格框之间应用自定义宽度?例如 element1 和 element2 之间 20px,然后 element2 和 element3 之间 30px?
我可以用 css 网格实现吗?
编辑:不使用填充。
Edit2:提供图片。
Click for picture preview
html, body {height: 100%; margin: 0; padding: 0;}
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-row: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#element1 {
grid-column: 1/2;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element2 {
grid-column: 2/3;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element3 {
grid-column: 3/4;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
<div id="element1">element1</div>
<div id="element2">element2</div>
<div id="element3">element3</div>
我没有看到任何关于 Grid 的具体情况,但您可以通过添加填充轻松实现所需的结果。
HTML
<div id="grid">
<div id="element1">
<div class="content">element1</div>
</div>
<div id="element2">
<div class="content">element2</div>
</div>
<div id="element3">
<div class="content">element3</div>
</div>
</div>
CSS
#element1 {
padding-right: 5px;
}
#element2 {
padding-left: 5px;
padding-right: 10px;
}
#element3 {
padding-left: 10px;
}
.content {
height: 100%;
border: 1px solid #2e2e2e;
}
JsFiddle 示例:
https://jsfiddle.net/wkt39kk8/
好吧,我喜欢使用 css-grid 的一般方法是创建额外的列。如果填充相同,则显然使用 grid-column-gap
和 grid-row-gap
,但如果不相同,则可以添加标记列。
为什么不填充/边距?
你完全可以为此使用填充/边距,但我更喜欢额外的列,因为在 css-grid 中你定义了包装器中的布局,这是它在语义上属于的地方。您也不必将它应用于这些列中的每个项目。 (另外,你是将它应用到左侧还是右侧还是两者?)。
但这弄乱了我的编号
是的,这就是为什么您 从不使用数字来描述 css 网格中的区域!
你可以命名你的线路和你的区域。用这个!您可以将 grid-template-areas
用于此矿石,只需将其命名为:
grid-template-columns: [left-start] auto [left-end right-start] auto [right-end];
哦,你想要额外的填充?给你:
grid-template-columns: [left-start] auto [left-end] 10px [right-start] auto [right-end];
请注意,我绝不是经验丰富的 Web 开发人员(恰恰相反),但我认为这种方法通常可能是最好的方法。
我正在尝试在每个网格元素之间应用不同的间隙,例如我们有以下代码。 4 条网格线、3 个元素和每个网格框之间的 10px 宽度。如何在每个网格框之间应用自定义宽度?例如 element1 和 element2 之间 20px,然后 element2 和 element3 之间 30px?
我可以用 css 网格实现吗?
编辑:不使用填充。 Edit2:提供图片。
Click for picture preview
html, body {height: 100%; margin: 0; padding: 0;}
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-row: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#element1 {
grid-column: 1/2;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element2 {
grid-column: 2/3;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element3 {
grid-column: 3/4;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
<div id="element1">element1</div>
<div id="element2">element2</div>
<div id="element3">element3</div>
我没有看到任何关于 Grid 的具体情况,但您可以通过添加填充轻松实现所需的结果。
HTML
<div id="grid">
<div id="element1">
<div class="content">element1</div>
</div>
<div id="element2">
<div class="content">element2</div>
</div>
<div id="element3">
<div class="content">element3</div>
</div>
</div>
CSS
#element1 {
padding-right: 5px;
}
#element2 {
padding-left: 5px;
padding-right: 10px;
}
#element3 {
padding-left: 10px;
}
.content {
height: 100%;
border: 1px solid #2e2e2e;
}
JsFiddle 示例:
https://jsfiddle.net/wkt39kk8/
好吧,我喜欢使用 css-grid 的一般方法是创建额外的列。如果填充相同,则显然使用 grid-column-gap
和 grid-row-gap
,但如果不相同,则可以添加标记列。
为什么不填充/边距?
你完全可以为此使用填充/边距,但我更喜欢额外的列,因为在 css-grid 中你定义了包装器中的布局,这是它在语义上属于的地方。您也不必将它应用于这些列中的每个项目。 (另外,你是将它应用到左侧还是右侧还是两者?)。
但这弄乱了我的编号
是的,这就是为什么您 从不使用数字来描述 css 网格中的区域!
你可以命名你的线路和你的区域。用这个!您可以将 grid-template-areas
用于此矿石,只需将其命名为:
grid-template-columns: [left-start] auto [left-end right-start] auto [right-end];
哦,你想要额外的填充?给你:
grid-template-columns: [left-start] auto [left-end] 10px [right-start] auto [right-end];
请注意,我绝不是经验丰富的 Web 开发人员(恰恰相反),但我认为这种方法通常可能是最好的方法。