[CSS] Grid의 Column, Row 격자 구분과 크기 지정

Grid Line을 지정할 때 Column과 Row로 지정한다는 것을 배웠다.

당연히 Column이니까 '세로 크기'를 지정하고, Row니까 가로 크기를 지정하는 줄 알았다.
또한 Column이니까 '가로'로 열을 구분하고, Row니까 '세로'로 행을 구분하는 줄 알았다.

그런데 전혀 반대로 동작하고 있는 것이다...
그냥 외워서 하면 되겠지만 감각적으로 이게 잘 와닿질 않아 어떤 의도로 이렇게 속성이 정해졌는지 알고자 정리해본다.

📌 Grid의 정의부터

1. Grid는 보이지 않는 Grid Line으로 나뉘어져있다.
2. Column Line은 '열(세로)'을 왼쪽에서 오른쪽으로 구분한다.
3. Row Line은 '행(가로)'을 위에서 아래로 구분한다.

📏 Column

• Column Line은 위에서 아래로 세로로 선을 쫙 그어서, 왼쪽에서 오른쪽으로 진행하며 '열(세로)'를 구분한다.
• grid-template-columns는 세로 선을 기준으로, '열(가로)'을 지정한다
  ➡️ 세로 선을 기준으로 가로 크기를 지정한다.

❌ "Column"이니까 "Column(세로)" 크기를 지정할 것 같다. (X)
✅ "Column"이니까 "Column Line(세로 선)" 사이 공간을 지정한다. ➡️ Grid Cell의 너비를 지정한다. (O)

📏 Row

• Row Line은 왼쪽에서 오른쪽으로 가로를 선을 쫙 그어서, 위에서 아래로 진행하며 '행(가로)'를 구분한다.
• grid-template-rows는 가로 선을 기준으로, “행(세로)”의 크기를 지정한다.

❌ “Row”니까 "Row(가로)" 크기를 지정할 것 같다. (X)
✅ “Row”니까 "Row Line(가로 선)" 사이의 공간을 지정한다. ➡️ Grid Cell의 높이를 지정한다. (O)

💡 정리

• 사실 grid에서 line을 나눈다는 것은, 각 cell의 크기를 지정해준다는 것보다 "행렬을 구분하겠다"라고 이해하는 편이 낫다.
  즉, "행렬의 개수"를 지정한다고 생각하면 이해가 쉽다. (어차피 주로 fr로 크기를 지정해줄 거기 때문에)
• columns는 구분 지은 Column Line(세로 선)을 기준으로 가로 크기를 지정한다.
• rows는 구분 지은 Row Line(가로 선)을 기준으로 세로 크기를 지정한다.