我正在尝试使用CSS网格创建一个两列布局。
我有
.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>
这是一个破解，但由于您所需要的只是清楚地显示标题是列的标签
只需将：margin-bottom: 0;
添加到CSS文件中的h4块中。
因此，与其存在，不如将其更改为下面的一个：
h4 {
background-color: yellow;
margin-bottom: 0;
}
试试看：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.columns {
display: grid;
grid-template-columns: auto auto;
row-gap: 0;
/*grid-template-rows: min-content min-content;*/
column-gap: 10px;
justify-content: center;
}
.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;
}
select {
display: grid;
grid-template-columns: min-content;
}
h4 {
background-color: yellow;
margin: 0;
}
</style>
</head>
<body>
<div class="my_class">
<div class="columns">
<div class="left_1"><h4>Left Header</h4></div>
<div class="left_2">
<select class="" multiple="yes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="right_1"><h4>Right Header</h4></div>
<div class="right_2">
<select class="" multiple="yes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
</div>
</body>
</html>