我正在尝试使用CSS Grid创建两列布局。
我有
.left_1 {
grid-column: 1;
grid-row: 1;
}
.left_2 {
grid-column: 1;
grid-row: 2;
}
...
.right_1 {
grid-column: 2;
grid-row: 1;
}
.right_2 {
grid-column: 2;
grid-row: 2;
}
...
依此类推。前两个网格元素仅包含用于标记各列的标题的标题标签：
<div class="left_1"><h4>Left Header</h4></div>
....
<div class="right_1"><h4>Right Header</h4></div>
这些网格面板最终比需要的要高得多，因此标题（在中间垂直对齐）漂浮在其余各列的上方，因此无法立即清除它们是否应该作为标签的信息。这些专栏。我已经为<h4>元素的背景上色，以确认它们是正常大小：刚好足够包含标头的文本。网格布局本身使面板太大。
我已经尝试将grid-template-rows: fit-content();（不同百分比），grid-template-rows: auto;，height: auto;，height: 100%;，height: fit-content;和display: inline-block;添加到left_1和right_1的类描述符中，但是什么也没有更改网格面板的高度。
我如何使网格面板的高度不超过容纳其内容所需的高度？我想避免对确切数目的像素进行硬编码。
编辑：以下是显示问题的完整文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.columns {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
.left_1 {
grid-column: 1;
grid-row: 1;
}
.left_2 {
grid-column: 1;
grid-row: 2;
}
.right_1 {
grid-column: 2;
grid-row: 1;
}
.right_2 {
grid-column: 2;
grid-row: 2;
}
h4 {
background-color: yellow;
}
</style>
</head>
<body>
<form>
<div class="columns">
<div class="left_1"><h4>Left Header</h4></div>
<select class="left_2" multiple="yes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<div class="right_1"><h4>Right Header</h4></div>
<select class="right_2" multiple="yes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</form>
</body>
</html>
尝试：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.columns {
display: grid;
grid-template-columns: repeat(auto-fit, 1fr);
column-gap: 10px;
justify-content: space-between;
}
.left_1 {
grid-column: 1;
grid-row: 1;
}
.left_2 {
grid-column: 1;
grid-row: 2;
}
.right_1 {
grid-column: 2;
grid-row: 1;
}
.right_2 {
grid-column: 2;
grid-row: 2;
}
h4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="my_class">
<div class="columns">
<div class="left_1"><h4>Left Header</h4></div>
<select class="left_2" multiple="yes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<div class="right_1"><h4>Right Header</h4></div>
<select class="right_2" multiple="yes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
</body>
</html>
有关自动调整的更多信息：https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
或者您也可以使用：
.columns {
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
justify-content: space-between;
}
为我工作。
这是一个技巧，但是既然您需要的是清楚地显示标题是列的标签。只需在CSS文件的h4块中添加margin-bottom: 0;。
因此，将其替换为下面的一个：
h4 {
background-color: yellow;
margin-bottom: 0;
}