Css网格fr单位

Question

在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>

Answer 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>

Answer 2

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

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