如何在 CSS 网格布局中将网格项的 with 设置为随机生成宽度的最小值和 50%？答案

【问题标题】：How to set the with of grid-item to minimum of random generated width and 50% in CSS grid layout?如何在 CSS 网格布局中将网格项的 with 设置为随机生成宽度的最小值和 50%？
【发布时间】：2021-06-07 10:22:08
【问题描述】：

我试图设计一个有 2 个网格项的设计，即 left 和 right。我试图让设计变得流畅，这样左边就可以占据它的最小宽度或 50%

类似min of(width, 50%)

我已经尝试过minmax，但它与我想要的相反。现在我别无选择

记住：first 列将具有动态宽度。只是为了测试，我已经接受了200px。它也应该是响应式的。

在下面的 sn-p 中，我希望第二列填充 first 和 second

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.left {
  width: 200px;
  background-color: cornflowerblue;
}

.right {
  background-color: cadetblue;
}

.container {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(auto, 1fr) 1fr;
}

<div class="container">
  <div class="left">LEFT</div>
  <div class="right"> Right </div>
</div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

我不确定，如果我明白你的意思，但你可以这样做：

grid-template-columns: minmax(auto, auto) 1fr;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.left {
  width: 200px;
  background-color: cornflowerblue;
}

.right {
  background-color: cadetblue;
}

.container {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(auto, auto) 1fr;
}

<div class="container">
  <div class="left">LEFT</div>
  <div class="right"> Right </div>
</div>

【讨论】：

和grid-template-columns: auto 1fr;完全一样。这是我不想要的。我的意思是，如果我测试响应性，那么它将始终采用相同的宽度。
所以你想要内容的最小宽度和全宽的 50% 的最大宽度？

【解决方案2】：

Flex 可能是您正在寻找的：使用 CSS 的最新趋势 flex

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.left {
  width: 200px;
  background-color: cornflowerblue;
}

.right {
  width: 100%;
  background-color: cadetblue;
}

.container {
  display: flex;
  height: 100%;
  width: 100%;
}

<div class="container">
  <div class="left">LEFT</div>
  <div class="right"> Right </div>
</div>

【讨论】：