Esta demonstração usa a função minmax() para layouts de grade. Na demonstração, essa função é usada para definir o tamanho mínimo da barra lateral como 100px
, mas em telas maiores, permitindo que ela se estenda para 25%
. A barra lateral sempre ocupará 25%
do espaço horizontal do pai até que esse 25%
seja menor que 100px
.
Adicione isso usando a propriedade grid-template-columns
com o seguinte valor:
minmax(100px, 25%) 1fr
. O item na primeira coluna (a barra lateral, neste caso) recebe um minmax
de 100px
em 25%
, e o segundo item (a seção main
aqui) ocupa o restante do espaço como uma única faixa 1fr
.
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}
HTML
<div class="parent">
<div class="section yellow" contenteditable>
Min: 100px / Max: 25%
</div>
<div class="section blue" contenteditable>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</div>
</div>
CSS
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}