CSS 쉽게 배우기 | Grid Layout (그리드 레이아웃)

CSS 그리드 레이아웃 기초 알아보기

 

저번편에서 플렉스 박스에대해서 알아봤죠?

확실히 플렉스 박스를 사용하니까 반응형 디자인을 좀더 쉽고 빠르게 만들수 있습니다

그럼 그리드 레이아웃은 뭘까요?

 

플렉스 박스처럼 반응형 디자인을 만들때 사용하는 방법중 하나 입니다

그러면, 이 둘의 차이점은 뭘까요?

 

쉽게 말하자면 '차원' 입니다

플렉스 박스는 1차원적이고

그리드 레이아웃은 2차원적이라고 볼수 있겠습니다

 

플렉스 박스에서는 컨테이너의 반응 방향을 한 방향으로만 (가로 또는 세로) 설정할수있지만

그리드 레이아웃에서는 컨테이너의 반응 방향을 두 방향으로 (가로, 세로) 각각 따로 설정할수 있습니다

 

또다른 차이점은 디자인의 적용입니다

플렉스 박스의경우 대부분의 반응형 디자인이 컨테이너 요소에 적용되지만

그리드 레이아웃의경우 컨테이너 요소에는 기본 설정만 하고 나머지는 자녀 요소에 적용합니다

 

그리드 레이아웃 컨테이너 설정하기

위에서 말했듯이 그리드 레이아웃은 가로, 세로 각각 따로 설정할수 있습니다

여기서 집고 넘어가야할것은

가로 = 행

세로 = 열

 

이제 컨테이너 요소를 설정해 볼까요?

우선 그리드를 사용할수있게 display: grid;로 해주고

이제 가로, 세로를 설정해주면 됩니다

 

그리드 레이아웃 가로 설정하기

위에서 말했듯이 가로 설정은 행들을 설정하는겁니다

(가로로 몇개의 행을 만들지, 각 행의 넓이는 얼마인지)

행을 설정할때는 grid-template-columns 속성을 사용합니다

이 속성은 두가지 방법으로 사용할수 있습니다

grid-template-columns: 40px 60px 100px 60px 40px;
grid-template-columns: repeat(4, 1fr);

첫번째 예시에 5개의 값이 주어진걸 볼수있죠

이렇게 설정할경우 5개의 행이 만들어지며, 각 값은 각 행의 넓이가 됩니다

 

두번째 예시에는 repeat() 이란 걸 사용했는데요

이건 CSS 에서 사용할수있는 함수로, 여러개의 행이 같은 넓이일때 사용합니다

모든 행이 같은 넓이이면 첫번째 예시처럼 일일이 하는것보다 이 함수를 사용해서 한번에 만드는게 더 편하죠

 

이 함수는 두가지의 값을 필요로 합니다

첫번째 값은 행의 수

두번째 값은 행의 넓이 입니다

예시에서 1fr 이란 단위를 사용했는데요

이 fr 단위는 플렉스 박스의 flex-grow 속성과 비슷하게 작용합니다

 

그리드 레이아웃 세로 설정하기

위에서 말했듯이 세로는 각 열을 말합니다

행을 설정할때처럼 몇개의 열을 만들지, 각 열의 높이는 얼마인지를 설정할수있습니다

열을 설정할때는 grid-template-rows 를 사용합니다

설정하는 방법은 grid-template-columns 와 같습니다

grid-template-rows: 200px 500px 200px;
grid-template-rows: repeat(3, 1fr);

 

 

그리드 구역 정하기

그리드 레이아웃의 큰 장점중 하나는 구역을 정할수 있다는건데요

구역 정하기라... 무슨 말인지 짧게 알아볼게요

 

보통의 웹디자인은 크게 3~4개의 구역으로 나뉘어져 있습니다

헤더 (header), 메인 (main), 사이드 (side)*, 푸터 (footer)

*없어도 큰 지장없는 추가적 디자인

 

그리드 레이아웃에서는 이런 공간들을 grid-template-area를 사용해서 정하고 사용할수 있습니다

예를들어

grid-template-areas:
		"header header header header",
		"main main . sidebar",
		"footer footer footer footer";

이렇게 구역을 정하면 그리드는 4개의 행, 3개의 열이 되고

첫번째 열은 헤더 구역

두번째 열의 두 행은 메인, 세번째 행은 빈 공간, 네번째 행은 사이드바

세번째 열은 푸터 가 됩니다

 

이렇게 구역을 정해놓으면 자녀 요소의 위치를 구역 이름을 사용해서 쉽게 정할수 있습니다

 

 

이걸로 컨테이너의 기본 설정들을 알아봤습니다

이제 자녀 요소에 사용되는 설정들을 알아볼게요

 

 

자녀 요소 그리드 설정하기

앞서 말했듯이 그리드 레이아웃의 큰 장점은 컨테이너 요소 안에있는 자녀 요소의 위치를 하나하나 원하는곳에 배치할수있다는 점입니다.

위치?

정확히 말하자면 위치와 차지하는 공간입니다.

자녀 요소의 크기는 그리드 레이아웃과 상관없이 따로 정할수 있습니다

 

자녀 요소의 그리드 시작과 그리드 끝

이 방법을 알아보기전에 그리드의 시작은 어디고 끝은 어디인지를 먼저 설명할게요

그리드 레이아웃에서 말하는 그리드의 시작, 그리드의 끝은 그 그리드의 선을 말합니다

 

그리드의 시작과 끝을 알았으니 자녀요소를 배정해볼까요?

지금부터는 5(행) x 5(열) 의 그리드 컨테이너를 예시로 사용할게요

.container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
}

 

grid-column-start, grid-column-end, grid-row-start, grid-row-end

grid-column-start 와 grid-column-end는 자녀 요소의 넓이를

grid-row-start 와 grid-row-end 는 자녀 요소의 높이를 조절합니다

.item-1 {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
}

자녀요소를 이렇게 배치하면 자녀요소는 2(행) x 2(열) 만큼의 공간을 차지합니다

 

grid-column, grid-row

첫번째 방법은 너무 쓸게 많죠?

grid-column 은 grid-column-start, grid-column-end 를 한번에

grid-row 는 grid-row-start, grid-row-end를 한번에 정할수 있습니다

.item-2 {
	grid-column: 3 / 6; // 3번째 행에서 시작
	grid-row: 1 / 4;
}

이렇게 배치하면 3(행) x 3(열) 만큼의 공간을 차지합니다

 

grid-area

grid-column 과 grid-row 가 확실히 편하기는 하지만 시작과 끝이 햇갈리기는 마찬가지죠.

물론 시작과 끝을 세밀하게 정해야할때도 있겠지만, 그렇지 않는경우 grid-area 를 사용하는게 좀더 쉬울수도 있습니다

위에서 grid-template-areas 를 봤죠?

만약 grid-template-areas를 사용해서 구역을 정했다면 이 구역 이름을 사용하면 됩니다

 

컨테이너에서 구역을 정하고

.container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"header header header header header",
		"main main main . sidebar",
		"footer footer footer footer footer";
}

 

각 자녀요소에 구역을 정해주면

.header {
	grid-area: header;
}

.main {
	grid-area: main;
}

.sidebar {
	grid-area: sidebar;
}

.footer {
	grid-area: footer;
}

 

알아서 그 구역을 자동으로 채워줍니다

 

 

 

이렇게 CSS 그리드 레이아웃의 기본을 알아봤습니다

생각보다 길어졌네요

이 외에도 더 많은걸 할수있지만 오늘은 여기서 끝낼게요

 

그냥 이렇게 보면 플렉스 박스보다 반응형이 더 좋은지 모르겠죠?

그리드 레이아웃을 100% 활용하려면 다른 하나가 더 필요한데요, 바로 @media (미디어 쿼리)라는 속성입니다

다음엔 미디어 쿼리에 대해서 알아볼게요

 

궁금하신게 있거나, 제가 놓친게 있다면 댓글 남겨주세요

 

 

수고하셨습니다

 

끝!