Auto-fit / Auto-fill
- auto-fit, auto-fill은 전부 repeat() 함수 안에서만 동작한다.
- 이 둘을 이용하면 responsive website(반응형 웹사이트)를 손쉽게 만들 수 있다. (최고의방법)
- repeat()의 첫번째 인자로 직접 숫자를 쓰는 것보다 auto-fill, auto-fit을 쓰는것이 좋음
auto-flll
- 우리가 정해준 크기 안에서 가능한 한 많은 빈 column(row)를 만들어준다.
- (남는 공간을 빈 cell로 가득 채움)
auto-fit
- 현재 element를 stretch해서 colum(row) 딱 맞게(fit) 해준다.
- 남는 공간에 현재 요소를 stretch해서 가득 채움
<body>
auto-fill
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
auto-fit
<div class="grid">
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</body>
.grid {
color: white;
display: grid;
gap: 5px;
grid-auto-rows: 100px;
}
.grid:first-child {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid:nth-child(2) {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: blue;
}
- 여기서 상자가 추가될 때 auto-fill은 빈 cell에 박스가 채워지고(사이즈 유지)
- auto-fit은 이미 화면이 꽉 차있는 상태에서 개수를 늘려야하니 사이즈가 유동적으로 변함(사이즈 축소)
댓글남기기