Question

我知道新的minmax()函数允许指定网格列的最小和最大宽度。但是，在使用此功能时，我不清楚＆＃34;默认＆＃34;列的宽度将是，以及如何指定它。

在网格之外 - 包括在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中使用：

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

第二列的75％强制第一列为25％。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle demo

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle demo

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

1 个答案:

jsFiddle demo