设置网格列/行的最小，最大和默认长度

Question

我知道新的minmax()函数允许指定网格列的最小和最大宽度。但是，在使用此函数时，我不清楚列的“默认”宽度是什么，以及如何指定它。

在网格之外 - 包括在flex布局中 - 可以指定如下内容：

.container {
    width: 25%;
    min-width: 200px;
    max-width: 400px;
}

有效地创建一个容器，默认情况下占用其父宽度的25％，但从不收缩到200px以下或超过400px。

实现这种效果的网格等价方式是什么？

Answer 1

基于您的一般CSS代码示例...

.container {
    width: 25%;
    min-width: 200px;
    max-width: 400px;
}

这里有一种方法可以在CSS Grid中使用：

1. 将第一列的宽度设置为最小200px，最大为400px。
2. 将第二列的宽度设置为最小值75％，最大值为1fr。

第二列的75％迫使第一列为25％。

1fr使第二列消耗额外的空间。

#container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) minmax(75%, 1fr);
  grid-gap: 10px;
  height: 100px;
  border: 1px solid gray;
}

#container > div {
  background-color: lightgreen;
  padding: 5px;
}

<div id="container">
  <div>
    grid item<br> minimum width = 200px<br> maximum width = 400px
  </div>
  <div>
    grid item<br> minimum width = 75%<br> maximum width = 1fr
  </div>
</div>

jsFiddle demo

笔记：

• 可以添加更多列。它们只需要具有总共高达75％的宽度。
• 您可能需要根据具体情况处理溢出情况。
• 关于你的问题的布局没有太多细节，所以我不能更精确。

除了上面的解决方案，我不相信CSS Grid可以实现这种效果。

据我所知，没有办法说：

列宽必须是容器的25％，且不得小于200px或大于400px。

您可以设置minmax()或固定长度。

换句话说，你可以这样做：

#container {
  display: grid;
  grid-template-columns: minmax(200px, 400px);
}

... 或这个：

#container {
  display: grid;
  grid-template-columns: 25%;
}

#container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 100px;
  background-color: #8cffa0;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

<div id="container">
  <div>
    grid item<br> minimum width = 200px<br> maximum width = 400px
  </div>
  <div>
    grid item<br> takes remaining space on the row
  </div>
</div>

jsFiddle demo

根据您的具体情况，将容器设置为网格项的25％和最小 - 最大值可能适合您。像这样的东西：

#container {
  display: grid;
  grid-template-columns: 25%;
}

#container > div {
   min-width: 200px;
   max-width: 400px;
}

请记住，第一个规则会调整列的大小，第二个规则会调整网格项的大小。因此，当25％列宽于400px网格项时，可能会有时间（特别是在更宽的屏幕上）。这将导致差距。

#container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 100px;
  background-color: #8cffa0;
}

#container > div:first-child {
  min-width: 200px;
  max-width: 400px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

<div id="container">
  <div>
    grid item
    <br> minimum width = 200px
    <br> maximum width = 400px
  </div>
  <div>
    grid item
    <br> takes remaining space on the row
  </div>
</div>

jsFiddle demo