전진하는 개발러

[CSS] flex, grid 헷갈리는 개념 정리 본문

WEB/CSS

[CSS] flex, grid 헷갈리는 개념 정리

어멘션 2023. 6. 11. 15:52

- CSS 레이아웃 시스템으로는 Flex, Grid이 두 가지 종류가 있음
- 나는 flex보다 grid가 더 진화된 버전이고,  마냥 grid가 더 좋은 줄 알았는데 그건 아님. 상황에 따라 달리 쓰는 편.
- flexbox는 1차원(한 방향) 레이아웃 시스템이고, grid는 2차원(양방향) 레이아웃 시스템.
- 이 두 시스템의 속성은  container, container안의 item에 적용되는 속성으로 구분할 수 있다.

- flexbox든 grid든 처음 사용하기 위해선 먼저 선언이 필요.
`display : flex`; `display : grid;`