在Css网格中,我可以:
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
有没有办法设置特定元素的宽度。
例如:
.grid { display: grid}
并在HTML中:
<div class="grid">
<p class="fr-1>text1</p>
<p class="fr-2>text1</p>
<p class="fr-1>text1</p>
</div>
这更适合您可以使用flex-grow
的flexbox布局
.grid {
display: flex
}
.fr-1 {
flex-grow: 1;
border:1px solid red;
}
.fr-2 {
flex-grow: 2;
border:1px solid green;
}
<div class="grid">
<p class="fr-1">text1</p>
<p class="fr-2">text1</p>
<p class="fr-1">text1</p>
</div>
<div class="grid">
<p class="fr-1">text1</p>
<p class="fr-1">text1</p>
<p class="fr-2">text1</p>
</div>
是啊!这就是你如何做到的。您将要使用CSS minmax函数。
.grid {
display: grid;
grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr) minmax(100px,1fr);
}
<div class="grid">
<p class="fr-1">text1</p>
<p class="fr-2">text1</p>
<p class="fr-1">text1</p>
</div>
如果你想专门将这些类分配到网格上的那个空间,你需要将这些类名保存在p标签上,然后将这个css添加到上面的代码片段中。
.fr-1 {
grid-column: 1/2;
}
.fr-2 {
grid-column: 2/3;
}
.fr-3 {
grid-column: 3/4;
}
另外,使用css网格,您实际上也可以为列命名,这在添加媒体查询时非常有用。以下是您如何做到这一点。
.grid {
display: grid;
grid-template-columns: [name-start] minmax(100px, 1fr) [name-end name-two-start] minmax(200px, 2fr) [name-two-end name-three-start] minmax(100px,1fr) [name-three-end];
}
.fr-1 {
grid-column: name-start/name-end;
}
.fr-2 {
grid-column: name-two-start/name-two-end;
}
.fr-3 {
grid-column: name-three-start/name-three-end;
}
您可以根据需要为此列命名。在这个例子中我用过; name-start,name-two-start等等。
希望这会有所帮助。如果我误解了,请告诉我,我会尽力帮助您解决问题。