[CSS] CSS Grid 정리

CSS Grid를 공부하면서 알게 된 정보들을 정리하는 글입니다.

 

 

들어가기에 앞서.. Grid란?

Grid(그리드)란 수평선과 수직선이 교차에서 만들어진 집합체입니다. 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용합니다.

 

일상생활에서 스마트폰으로 사진을 찍을 때 그리드를 키게 되면 화면상에 격자가 나오게 됩니다.

 

이전에는 파이어폭스의 개발자 모드에서만 그리드를 적용한 모습을 보여주어 설치가 필수적이었습니다. 하지만 2021년 6월경에 크롬 브라우저도 Grid와 Flex의 적용된 모습을 개발자 모드에서 보여주는 기능이 지원되었습니다. 따라서 본인이 편한 환경에서 구현하시면 될 것 같습니다.

 

Grid의 장점 1) 고정 가능한 크기

그리드를 레이아웃에 맞게 원하는 크기로 만들 수 있습니다. 또한, 유연하게 크기를 설정할 수 있도록 fr이라는 단위를 사용해 그리드를 작성할 수 있습니다.

 

Grid의 장점 2) 아이템 배치

라인 번호, 이름을 이용하여 그리드 영역을 대상으로 하여 정확한 위치에 아이템들을 배치할 수 있습니다. 또한, 명시적으로 위치를 지정하지 않아도 그리드 위치를 지정하는 특정 알고리즘에 의해 자동적으로 지정됩니다. 이 특성을 이용해 페이지 영역을 설계할 때 많이 사용됩니다.

 

Grid의 장점 3) 정렬

그리드는 정렬을 할 수 있습니다. 그리드 영역에 아이템들을 배치한 후 어떻게 정렬할지 정할 수 있습니다.

 

Grid Properties (Grid Container & Grid Item)

그리드는 Container와 Item이라는 두 개의 프로퍼티로 나누어져있습니다. Container가 Item을 감싸고 있습니다. Container가 '틀'이고, Item이 '안에 들어가는 요소'라고 생각하시면 됩니다.

 

다음 두 게시글에 순차적으로 Grid Container와 Grid Item을 정리해서 올릴 예정입니다.

Grid Container (22.08.21 자정): https://laurent.tistory.com/entry/CSS-Grid-정리-1-Grid-Container

Grid Item(22.08.28 자정): https://laurent.tistory.com/entry/CSS-CSS-Grid-정리-2-Grid-Item

 

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout

Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN

https://developer.chrome.com/docs/devtools/css/grid/

Inspect CSS Grid - Chrome Developers

https://www.udemy.com/course/advanced-css-and-sass/