CSS 그리드에서 픽셀과 fr 단위

열 너비를 픽셀과 fr 단위로 동시에 설정할 수 있습니다:

html<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>

css#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;
}

Результат:

Задание 1

그리드에 세 개의 열이 있다고 가정합니다. 첫 번째 열이 100px를 차지하고 나머지 두 열의 크기가 동일하도록 만드세요.

Задание 2

그리드에 네 개의 열이 있다고 가정합니다. 첫 번째 열과 마지막 열이 100px를 차지하고, 남은 공간을 나머지 열이 나누어 가져되 세 번째 열이 두 번째 열보다 1.5배 더 크도록 만드세요.