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>