[CSS] Grid : CSS Layout

 

CSS Layout : Flex와 Grid 

CSS layout에는 Flex와 Grid가 있다.

CSS Flex와 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. 

Flex와 Grid의 차이는 중심축에 따른 레이아웃 시스템을 어떻게 제공하느냐에 있다. 

Flex는 row 또는 column으로 설정한 중심축에 따라 1차원적으로 아이템들을 배치할 수 있고 반면에 grid는 (row와 column) 2차원적으로 아이템들을 배치할 수 있다.

둘 다 훌륭하지만 비교적 좀 더 복잡한 레이아웃을 구현하기 위해 CSS Grid를 사용할 수 있다.

 

flexbox

- container에 적용되는 속성값과 container 안에 있는 각각의 item들에 적용할 수 있는 속성값이 존재한다. 

- 중심축과 반대축이 있다.
중심축을 수직 또는 수평으로 설정하여 아이템들을 배치하도록 하는데, 중심축이 수직 또는 수평이냐에 따라 반대축이 바뀐다. 예를들어 중심축이 수직이라면 아이템들은 위에서 아래로 정렬된 모습일 것이고 반대축은 수평으로 이해하면 된다.

column이 주축이면 아이템은 상단에서 하단 방향으로 배치된다 (이미지 출처 MDN flexbox)

 

 

 

Grid 속성과 사용

앞서 말했듯 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. 다음은 Grid Container와 Item에 해당하는 속성들이다.

 

Grid Container Properties

속성	의미
display	그리드 컨테이너(Container)를 정의
grid-template-rows	명시적 행(Track)의 크기를 정의
grid-template-columns	명시적 열(Track)의 크기를 정의
grid-template-areas	영역(Area) 이름을 참조해 템플릿 생성
grid-template	grid-template-xxx의 단축 속성
row-gap(grid-row-gap)	행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap)	열과 열 사이의 간격(Line)을 정의
gap(grid-gap)	xxx-gap의 단축 속성
grid-auto-rows	암시적인 행(Track)의 크기를 정의
grid-auto-columns	암시적인 열(Track)의 크기를 정의
grid-auto-flow	자동 배치 알고리즘 방식을 정의
grid	grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content	그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content	그리드 콘텐츠를 수평(행 축) 정렬
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items	그리드 아이템들을 수평(행 축) 정렬
place-items	align-items와 justify-items의 단축 속성

 

Grid Item Properties

속성	의미
grid-row-start	그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end	그리드 아이템의 행 끝 위치 지정
grid-row	grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start	그리드 아이템의 열 시작 위치 지정
grid-column-end	그리드 아이템의 열 끝 위치 지정
grid-column	grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area	영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self	단일 그리드 아이템을 수직(열 축) 정렬
justify-self	단일 그리드 아이템을 수평(행 축) 정렬
place-self	align-self와 justify-self의 단축 속성
order	그리드 아이템의 배치 순서를 지정
z-index	그리드 아이템의 쌓이는 순서를 지정

(Properties 출처 : HEROPYTech)

 

 

Grid 사용 예제

다음 예제는 CSS Grid를 활용하여 만든 반응형 이미지 레이아웃이다. 

See the Pen CSS Grid by hyoeun (@hyonixk) on CodePen.

 

 

---

🔥Tutorial 

Dreamcoding : https://youtu.be/nxi1EXmPHRs

Heropy : https://heropy.blog/2019/08/17/css-grid/
MDN grid : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

MDN Flexbox : https://developer.mozilla.org/en-US/docs/Web/CSS/