CSS 심화 공부(12)

프로그래밍/css 심화

lamarcK 2025. 3. 13. 22:54

플렉스 박스 VS 그리드

플렉스 박스의 경우 주축(행 혹은 열)을 기준으로 아이템을 배치하고 정렬하는 1차원 레이아웃 시스템이었다.

그리드는 행과 열을 사용해서 아이템을 배치하고 정렬하는 2차원 레이아웃 시스템이다.

말하자면 그리드 CSS는 행렬(matrix)과 유사한 구조를 사용하여 레이아웃을 구성한다고 할 수 있다.

플렉스 박스가 방을 1자로 늘어놓는다고 치면

그리드는 ㄱ자 ㄴ자 ㄷ자 식으로 좀 더 자유롭게 구성이 가능하다.

2차원 레이아웃
- 행(row)과 열(column)을 사용하여 콘텐츠를 배치한다.
- 플렉스박스가 1차원 레이아웃에 특화된 것과 달리, 그리드는 2차원 레이아웃을 자유롭게 구성할 수 있다.
유연한 레이아웃 구성
- 다양한 단위(픽셀, 퍼센트, fr 등)를 사용하여 행과 열의 크기를 정의할 수 있다.
- 반응형 디자인을 구현하기에 적합하다.
직관적인 배치:
- 그리드 라인, 그리드 영역 등을 사용하여 콘텐츠를 원하는 위치에 정확하게 배치할 수 있다.
- 복잡한 레이아웃도 직관적으로 디자인할 수 있다.
콘텐츠 배치 순서 제어:
- HTML 코드의 순서와 상관없이 콘텐츠의 배치 순서를 변경할 수 있다.

그리드 컨테이너(Grid Container)
- display: grid; 또는 display: inline-grid; 속성을 적용하여 그리드 레이아웃을 생성하는 부모 요소이다.
그리드 아이템(Grid Item)
- 그리드 컨테이너의 자식 요소이며, 그리드 레이아웃 안에서 배치된다.
그리드 트랙(Grid Track)
- 행 또는 열을 의미한다.
그리드 라인(Grid Line)
- 그리드 트랙을 구분하는 선이다.
그리드 셀(Grid Cell)
- 행과 열이 교차하는 하나의 단위 공간이다.
그리드 영역(Grid Area)
- 여러 개의 그리드 셀을 묶어 만든 영역이다.