CSS 그리드에서의 minmax 함수
auto-fill과 함께
minmax 함수를 지정하는 것은 매우 편리합니다.
이 함수는 열 너비의 범위를
최소값에서 최대값까지 설정합니다.
컨테이너 너비가 모든 열을 수용할 수 없으면,
일부 열이 새 줄로 이동하며,
해당 줄의 열은 그 안에 고르게 분배됩니다.
예제를 통해 살펴보겠습니다. 열 배치의 다양한 변형을 보려면 페이지 너비를 변경하세요:
<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, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
minmax 함수의 동작을 보여주는
예제를 작성하세요.
