CSS 그리드에서 auto 값의 의미
그리드에서 행과 열의 크기를 지정할 때
auto 값을 사용할 수 있습니다. 이 경우,
블록들은 픽셀 단위로 지정된 너비를 제외한
사용 가능한 모든 남은 공간을 채웁니다.
예제를 통해 살펴봅시다.
첫 번째와 세 번째 열에는 픽셀 단위의 고정 너비를 지정하고, 두 번째 열은 남은 공간을 자동으로 차지하도록 해봅시다:
<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: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
자식 요소들을 두 개의 열에 배치하세요:
첫 번째 열 너비는 200px,
두 번째 열은 남은 공간을 차지하도록 하세요.
자식 요소들을 세 개의 열에 배치하세요:
첫 번째 열 너비는 100px,
두 번째 열 너비는 150px,
세 번째 열은 남은 공간을 차지하도록 하세요.
