[CSS] Grid 예제로 간단하게 레이아웃 만들기

들어가기 전

나는 평소에 레이아웃을 만들 때 flex로만 구성하기도 한다. grid로도 할 수 있지만 이미 flex에 익숙해져 있어서 grid 사용 경험이 따로 없다. grid로도 할 수 있는 것들은 flex로 다 할 수 있지만 그래도 상황에 따라서는 grid가 더 나을 수 있기도 하다. 그래서 grid를 한번 사용해보고 간단하게 grid에 대해서 포스팅해보려고 한다.

대충 그리드 row column 개념을 그려봤다.

 

Grid 에 대해서

grid도 flex처럼 레이아웃을 배치할 때 사용한다.

물론 grid로 할 수 있는 것들은 flex에서도 가능하지만

flex 와 grid가 편한 경우가 상화에 따라 각각 다르다.

 

flex 는 간단하게 한줄의 레이아웃을 할 때 간편하고

grid 는 조금 더 복잡한 2D 레이아웃을 제작할 때 간편하다.

 

(쉽게 말해 1줄로 정렬과 가로 세로 둘다 자유롭게 사용할 수 있는 차이이다.)

 

grid / flex 편한 예시

grid	flex
뉴스 기사 3행 2열	카드 3개 가로 나열
포토 갤러리	네비게이션

 

Grid 사용 예시

1) repeat과 fr로 일정한 비율로 레이아웃 구성

See the Pen Untitled by 박상철 (@bqoqixdb-the-decoder) on CodePen.

 

2) grid-row / grid-column 를 이용한 레이아웃 구성

See the Pen Untitled by 박상철 (@bqoqixdb-the-decoder) on CodePen.

*grid-row(column) 은 행열의 시작점과 끝을 정해줄 수 있다.

해당 코드에서 확인

 

Grid에서 많이 쓰는 대표적인 키워드

키워드	설명
display: grid	Grid 레이아웃 시작
grid-template-columns	열(column) 정의
grid-template-rows	행(row) 정의
repeat(n, size)	반복 정의
fr	바율 단위
minmax(min, max)	반응형 레이아웃
gap	간격
grid-coumn, grid-row	특정 아이템 위치 확장