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를 사용할 수 있다.
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/
'Web design > HTML & CSS' 카테고리의 다른 글
CSS의 새로운 기능 (2022 구글 I/O 주요 기능) (4) | 2022.06.17 |
---|---|
[CSS] Position : Sticky (0) | 2021.02.20 |
[CSS속성] 이미지 제어 : object-fit과 object-position (0) | 2021.02.20 |
[CSS속성] 텍스트를 강조하는 방법 (0) | 2020.12.03 |
CSS Preprocessor, SASS, SCSS (0) | 2020.10.15 |