인프런 커뮤니티 질문&답변

섹션 2 - 강력한 CSS의 "grid 속성" 강의에서 15분 30초쯤에 보이는 grid 레이아웃이 그림 예시와 적용된 속성값이 다른 것 같습니다.

grid-item에게 grid-column: 1 / 3; grid-row: 2 / 3; 속성을 주고 실행했을 경우 아래의 레이아웃으로 나눠지고
ex)
HTML

<div class="container">
  <div class="item item1">box</div>
  <div class="item">box</div>
  // ...
</div>

CSS

.container {
  box-sizing: border-box;
  border: 2px solid pink;
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: 1fr 2fr;
}
.item {
  font-size: 1.3em;
  font-weight: 500;
  border: 2px solid powderblue;
}
.item1 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

result)
ㅁ ㅁ ㅁ ㅁ
[ㅁ ㅁ]ㅁ ㅁ

강의에서 보여지는 레이아웃처럼 만드려면 grid-column: 1 / 4; grid-row: 2 / 3; 처럼 입력해 주어야 아래처럼 적용이 되었습니다.
ex)
CSS

/* ... */
.item1 {
  grid-column: 1 / 4;  /* 3 -> 4 */
  grid-row: 2 / 3;
}

result)
ㅁ ㅁ ㅁ ㅁ
[ㅁ ㅁ ㅁ]ㅁ

제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.