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

Question

我知道新的minmax() 函数允许指定网格列的最小和最大宽度。然而，当使用这个函数时，我不清楚列的“默认”宽度是多少，以及如何指定它。

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

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

有效地创建一个默认情况下占据其父级宽度的 25% 的容器，但绝不会缩小到 200 像素以下或超过 400 像素。

实现此效果的网格等效方法是什么？

Answer 1

基于您的通用 CSS 代码示例...

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

这是一种适用于 CSS Grid 的方法：

1. 将第一列的宽度设置为最小 200 像素和最大 400 像素。
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%，且不得小于 200 像素或大于 400 像素。

您可以设置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% 并将 min-max 设置为网格项目，可能对您有用。像这样的：

#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