Sidebar bertuliskan

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;
}