Css网格fr单位

问题描述 投票:0回答:2

在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>
css css3 css-grid
2个回答
1
投票

这更适合您可以使用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>

1
投票

是啊!这就是你如何做到的。您将要使用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等等。

希望这会有所帮助。如果我误解了,请告诉我,我会尽力帮助您解决问题。

© www.soinside.com 2019 - 2024. All rights reserved.