使用百分比为网格列设置最小和最大宽度 [英] Set minimum and maximum widths to grid column using percentages

问题描述

当我将CSS网格列中的第一列设置为最小百分比时，列宽不会达到最小.示例:

When I set the first column in a CSS grid column to a minimum percentage, the column width does not observe the minimum. Example:

grid-template-columns: minmax(50%, 75%)  1fr;

使用这些值，当视口变窄时，第一列将保持水平缩小，直到最终折叠并消失为止.同样，拉伸屏幕会使第一列随您移动而变宽，从而最终使其比总网格宽度的3/4宽.

With these values, as the viewport narrows the first column keeps shrinking horizontally until it finally collapses and disappears. Likewise, stretching the screen makes the first column wider as you go, so that eventually its wider than 3/4 of the total grid width.

(即使如此，至多网格宽度，两列的比例也确实大致对应于我要实现的目标.)

(Even so, at most grid widths the proportions of the two columns do correspond, roughly, to what I'm trying to achieve.)

那么有没有一种方法可以使第一列的宽度始终至少为网格宽度的一半，并且永远不超过2/3?

So is there a way to make a first column whose width is always, say, at least half of the grid width, and never more than 2/3?

注意:

• Grid-gap现在为0，以避免使百分比计算.
• 我知道我可以将最小宽度设置为固定数量的像素，从而强制执行最小宽度-列不会消失.但是，随着网格变窄，违反了最大百分比约束.此外，我尝试不使用固定的像素宽度.

我的代码(添加了网格间隙以显示列边界):

My code (grid-gap added to show column boundaries):

.wrapper {
  display: grid;
  grid-template-columns: minmax(50%, 75%) 1fr;
  grid-gap: 1px;
  padding: 10px;
  background-color: #219643;
}

.item {
background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="wrapper">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
</div>

推荐答案

您的原始代码看起来不错.我相信它应该工作.对我来说，为什么还不完全清楚.

Your original code looks fine. I believe it should work. Why it doesn't isn't entirely clear to me.

我这样说:我们只是在网格级别1 .这是一项崭新的技术，因此您应该会遇到一些小故障和限制.

I'll say this: We're just at Grid Level 1. It's brand new tech, so you should expect some glitches and limitations.

例如，在您的 minmax(50％，75％)中，轨道将始终默认为 max 值.

For example, in your minmax(50%, 75%), the track will always default to the max value.

• minmax()默认为max

这将 minmax()删除为许多布局中的有用选项，因为许多人希望使用 min 默认值.

This removes minmax() as a useful option in many layouts, as many people want a min default.

为什么最小百分比不起作用?我认为这与父容器的宽度(我尝试过的任何设置都没有关系)有关，或者与网格

Why doesn't the minimum percentage work? I think it has something to do with the width of the parent container (no settings I tried worked), or something with the grid track sizing algorithm. Again, it's unclear.

因此，我只是跳过了所有内容，以不同的方式为浏览器提供了相同的命令.这似乎可行:

So I just skipped over all that, giving the browser the same commands in a different way. This seems to work:

.wrapper {
  display: grid;
  grid-template-columns: minmax(50%, 1fr) 25%;
  grid-gap: 1px;
  padding: 10px;
  background-color: #219643;
}

.item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="wrapper">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
</div>

这篇关于使用百分比为网格列设置最小和最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！