CSS 그리드에서 auto-fill 값의 의미
그리드 컨테이너의 동일한 열 크기를 설정할 때
repeat 함수에 auto-fill 값을 지정하는 것이
매우 편리합니다. 이를 통해 우리의 컨테이너는 필요한 너비의
동일한 열로 채워집니다.
여덟 개의 요소로 된 테이블을 만들고
각 열의 너비를 200px로 동일하게 설정해 봅시다.
이때, auto-fill 값이 필요한 열의 개수를
자동으로 계산하도록 합시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
열 너비를 200px로 설정하세요.
부모 요소의 너비를 변경해 보고
열의 개수가 어떻게 변하는지
확인하세요.
