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

问题描述

我知道新的函数，用于指定网格列的最小和最大宽度。但是，使用此功能时，我不清楚该列的默认宽度是什么，以及如何指定它。

I'm aware of the new minmax() function that allows specification of minimum and maximum width for a grid column. When using this function, however, I'm unclear what the "default" width of the column would be, and how to specify it.

在网格外部-包括弹性布局-可以指定以下内容：

Outside of a grid - including in flex layouts - it's possible to specify something like this:

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

有效地创建一个默认情况下占据其父级宽度25％的容器，但绝对不要缩小到200像素以下或增长到400像素以上。

effectively creating a container that would by default occupy 25% of its parent's width, but never shrink below 200px or grow past 400px.

达到此效果的等效网格方式是什么？

What's the grid equivalent way of achieving this effect?

推荐答案

根据您的常规CSS代码示例...

Based on your general CSS code sample...

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

这是一种可能在CSS Grid中起作用的方法：

here's one approach that may work in CSS Grid:

1. 将第一列的宽度设置为最小200px，最大400px。


2. 设置第一列的宽度第二列，最低为75％，最高为 1fr 。

1. Set the width of the first column to a minimum of 200px and a maximum of 400px.
2. Set the width of the second column to a minimum of 75% and a maximum of 1fr.

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

The 75% on the second column forces the first column to be 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>

注意：

• 可以添加更多列。它们只需要具有总共加起来等于75％的宽度。


• 您可能需要根据实际情况来处理溢出情况。


• 您的问题中有关布局的详细信息并不多，所以我不能更加精确。

除了上述解决方案，我认为CSS Grid不可能实现这种效果。

Aside from the solution above, I don't believe this effect is possible with CSS Grid.

据我所知，没有办法说：

As far as I can tell, there's no way to say:

您可以设置 minmax（）或固定长度。

You can either set the minmax() or the fixed length.

换句话说，您可以执行以下操作：

In other words, you can do this:

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

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

Depending on your exact circumstances, setting the container to 25% and min-max to the grid item, may work for you. Something like this:

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

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

请记住，第一个规则的大小列和第二个规则调整网格项的大小。因此，有时25％列的宽度比400px网格项目的宽度大（尤其是在更宽的屏幕上）。

Just keep in mind that the first rule sizes the column and the second rule sizes the grid item. So there may be times (especially on wider screens) when the 25% column is wider than the 400px grid item. This would result in a gap.

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

这篇关于设置网格列/行的最小，最大和默认长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！