Thanh bên cho biết

Bản minh hoạ này tận dụng hàm minmax() cho bố cục lưới. Trong bản minh hoạ, hàm này dùng để đặt kích thước thanh bên tối thiểu thành 100px. Tuy nhiên, trên các màn hình lớn hơn, kích thước mở rộng đến 25%. Thanh bên sẽ luôn chiếm 25% không gian ngang của thành phần mẹ cho đến khi 25% nhỏ hơn 100px.

Thêm giá trị này bằng cách sử dụng thuộc tính grid-template-columns với giá trị sau: minmax(100px, 25%) 1fr. Mục trong cột đầu tiên (trong trường hợp này là thanh bên) nhận minmax là 100px tại 25% và mục thứ hai (phần main ở đây) chiếm phần còn lại của không gian dưới dạng một bản nhạc 1fr duy nhất.

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

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

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}