调整水平大小而不调整列大小的网格布局[重复]答案

【问题标题】：grid layout with resize horizontal not resizing columns [duplicate]调整水平大小而不调整列大小的网格布局[重复]
【发布时间】：2021-06-13 14:45:01
【问题描述】：

我有一个网格布局，我在其中一个上使用resize: horizontal。它可以让我调整框的大小，但不会像我期望的那样调整其他列的大小。

html,
body,
.main {
  height: 100%;
  margin: 0;
}

.main {
  display: grid;
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-rows: 50px 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas: "header-box header-box" "left-box main-box";
}

.header-box {
  background-color: lightblue;
  grid-area: header-box;
  overflow: hidden;
}

.left-box {
  background-color: lightgreen;
  grid-area: left-box;
  resize: horizontal;
  overflow: auto;
}

.main-box {
  background-color: lightpink;
  grid-area: main-box;
  overflow: auto;
}

<div class="main">
  <div class="header-box">header box</div>
  <div class="left-box">left box</div>
  <div class="main-box">main box</div>
</div>

【问题讨论】：

您需要像我在之前的回答中向您展示的那样做。 auto 1fr 并且您设置了初始宽度
和 minmax(100px, 200px) 等于 200px 所以这是你的初始宽度
我想让它的列可以在 100px 到 200px 之间变化。
在列中添加一个最大宽度和一个最小宽度
@TemaniAfif 我现在明白了。起初我不明白另一篇文章是如何应用于这篇文章的，但现在我明白了。谢谢！

标签： html css grid css-grid grid-layout

【解决方案1】：

minmax(100px, 200px) 与 200px 一样好，如果您想将行为更改为 minmax(100px, 1fr)

如果您希望网格响应内容而不是其自身父级的可用宽度，请更改为display: inline-grid;

html,
body,
.main {
  height: 100%;
  margin: 0;
}

.main {
  display:inline-grid;
  grid-template-columns: minmax(100px, 1fr) 1fr;
  grid-template-rows: 50px 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas: "header-box header-box" "left-box main-box";
}

.header-box {
  background-color: lightblue;
  grid-area: header-box;
  overflow: hidden;
}

.left-box {
  background-color: lightgreen;
  grid-area: left-box;
  resize: horizontal;
  overflow: auto;
}

.main-box {
  background-color: lightpink;
  grid-area: main-box;
  overflow: auto;
}

<div class="main">
  <div class="header-box">header box</div>
  <div class="left-box">left box</div>
  <div class="main-box">main box</div>
</div>

【讨论】：