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

.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;
}

您可以根据需要命名此列。在这个例子中，我使用了名称开始，名称两个开始等等。

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

CSS网格FR单位

2 个答案: