调整水平大小而不调整列大小的网格布局

Question

我有一个网格布局，我正在其中一个上使用 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>

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

调整水平大小而不调整列大小的网格布局

grid layout with resize horizontal not resizing columns

html

css

grid

grid-layout

css-grid