Demo ini memanfaatkan fungsi minmax() untuk tata letak petak. Dalam demo, fungsi ini digunakan untuk menetapkan ukuran sidebar minimum ke 100px
, tetapi pada layar yang lebih besar, memungkinkannya direntangkan ke 25%
. Sidebar akan selalu menggunakan 25%
dari ruang horizontal induknya sampai 25%
tersebut menjadi lebih kecil dari 100px
.
Tambahkan ini menggunakan properti grid-template-columns
dengan nilai berikut:
minmax(100px, 25%) 1fr
. Item di kolom pertama (dalam hal ini sidebar) mendapatkan minmax
sebesar 100px
di 25%
, dan item kedua (bagian main
di sini) menggunakan sisa ruang sebagai satu trek 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;
}