У меня есть макет сетки CSS с четырьмя столбцами, и мне нужно, чтобы первые два и вторые два занимали 50% ширины контейнера каждый. Но я не знаю ширину нечетных столбцов.
Так что в основном что-то вроде grid-template-columns: auto calc(50% - auto) auto calc(50% - auto); Я знаю, что это не работает, но мне было интересно, возможно ли это вообще. Кто-нибудь был в подобной ситуации и есть какие-то предложения?
редактировать: поэтому зеленые столбцы должны соответствовать содержимому, а синие - занимать оставшееся пространство. Красная линия находится на 50% ширины контейнера.
.container {
display: grid;
grid-template-columns: auto 1fr auto 1fr;
width: 300px;
}
.container > div {
border: 1px solid black;
}
.fit {
background-color: lime;
}
.container > div:not(.fit) {
background-color: lightblue;
}
#helper1 {
grid-column: 1/3;
background-color: orange;
}
#helper2 {
grid-column: 3/5;
background-color: orange;
}<div class="container">
<div class="fit">ABC</div>
<div>0</div>
<div class="fit">A</div>
<div>1<br>2<br>3</div>
<div class="fit">A</div>
<div>4<br>5</div>
<div class="fit">ABCDEFG</div>
<div>6</div>
<div class="fit">B</div>
<div>7</div>
<div class="fit">D</div>
<div>8</div>
<div id="helper1">50%</div>
<div id="helper2">50%</div>
</div>Итак, какие значения использовать для столбцов grid-template-columns, чтобы синие столбцы не имели одинаковую ширину, а суммировались с их левой стороной, примыкающей к 50% ширины контейнера.
