#javascript #css #node.js
#javascript #css #node.js
Вопрос:
Из моего исследования этой проблемы я узнал, что сетки CSS, по-видимому, способны к довольно сложному поведению. Мой сценарий проще, и я ожидал, что у меня будет 4 равномерно расположенных поля панели с кодом ниже. Мой вопрос в том, почему горизонтальный разрыв не центрирован посередине по вертикали? Я работал с trail amp; error, чтобы протестировать различные комбинации спецификаций выравнивания, выравнивания и сетки, но не смог найти решение. Что мне нужно добавить в мой код, чтобы пробел был центрирован вертикально на странице?
.main-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
height: 100vh;
align-items: stretch;
margin: 0;
padding: 0;
justify-content: space-between;
}
.container {
border: 3px solid black;
display: flex;
position: relative;
flex-direction: column;
margin: 0;
padding: 0;
}
.shared {
justify-content: center;
border: none;
}
.sub-container {
border: 3px solid black;
align-items: stretch;
height: 100%;
margin: 0;
padding: 0;
}
<div class="main-container">
<div class="container" id="A">
<h1>Section A</h1>
<p id="A-values">A Values</p>
</div>
<div class="container" id="B">
<h1>Section B</h1>
<p id="B-values">B Values</p>
</div>
<div class="container" id="C">
<h1>Section C</h1>
<p id="C-values">C Values</p>
</div>
<div class="container shared" id="D">
<div class="sub-container">
<h2>SubSection D1</h2>
<p id="D1-values">D1 Values</p>
</div>
<div class="sub-container">
<h2>SubSection D2</h2>
<p id="D2-values">D2 Values</p>
</div>
<div class="sub-container">
<h2>SubSection D3</h2>
<p id="D3-values">D3 Values</p>
</div>
</div>
</div>
Ответ №1:
По умолчанию высота устанавливается в соответствии с самым длинным элементом в строке, высота в нижней строке отличается от высоты в верхней просто потому, что в одном из столбцов больше содержимого.
Попробуйте установить строки так, как у вас есть столбцы, добавьте grid-template-rows: repeat(2, 1fr);
в main-container
класс