Attempting to implement a two-column layout using CSS Grid.
Defined classes for grid columns and rows:
.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;
}
...
The top headers for each column are added as follows:
<div class="left_1"><h4>Left Header</h4></div>
....
<div class="right_1"><h4>Right Header</h4></div>
The height of the grid panels is causing an issue, making them taller than needed. The headers seem oversized due to vertical alignment within the grid elements. Attempts to adjust with CSS properties like grid-template-rows, height, and display didn't resolve this problem.
How can I ensure that the grid panels adjust their height based on content without specifying fixed pixel values?
Edit: Providing a complete file example to demonstrate the issue:
<!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>