사이드바 내용

이 데모는 그리드 레이아웃에 minmax() 함수를 활용합니다. 데모에서는 이 함수를 사용하여 최소 사이드바 크기를 100px로 설정하지만, 큰 화면에서는 25%까지 늘릴 수 있습니다. 사이드바는 25%가 100px보다 작아질 때까지 항상 상위 요소 가로 공간의 25%를 차지합니다.

grid-template-columns 속성을 minmax(100px, 25%) 1fr 값과 함께 사용하여 추가합니다. 첫 번째 열 (이 경우 사이드바)의 항목은 25%에서 100px의 minmax를 가져오고 두 번째 항목 (여기서는 main 섹션)은 단일 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;
}