CSS 그리드에서 픽셀과 fr 단위
열 너비를 픽셀과
fr 단위로 동시에
설정할 수 있습니다:
<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>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 1fr 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
그리드에 세 개의 열이 있다고 가정합니다.
첫 번째 열이 100px를 차지하고 나머지
두 열의 크기가 동일하도록 만드세요.
그리드에 네 개의 열이 있다고 가정합니다.
첫 번째 열과 마지막 열이 100px를 차지하고,
남은 공간을 나머지 열이 나누어 가져되 세 번째 열이
두 번째 열보다 1.5배 더 크도록 만드세요.
