[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용

[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용

1 반응형 웹

2 미디어 쿼리

3 그리드 레이아웃

4 플렉스 박스 레이아웃

5> CSS 그리드 레이아웃 사용

5 CSS 그리드 레이아웃 사용

CSS 그리드 레이아웃

 

 CSS 그리드 레이아웃은 가로와 세로를 모두 사용한다. 따라서 플렉스 항목은 1차원이고, CSS 그리드 레이아웃은 2차원이라고 말한다.

 

	칼럼	←       칼럼 간격       →	칼럼	←       칼럼 간격       →	칼럼
줄	1		2		3
↑ 줄 간격 ↓
줄	4		5		6
↑ 줄 간격 ↓
줄	7		8		9

 

 가로 열(줄)과 세로 행(칼럼)으로 구성되며 1, 4, 7 / 2, 5, 8 / 3, 6, 9가 칼럼을 구성하고 1, 2, 3 / 4, 5, 6 / 7, 8, 9가 줄을 구성한다.

 

그리드 컨테이너를 지정하는 display 속성

 

 그리드 레이아웃을 지정할 때에는 display 속성을 사용하여, 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어야 한다.

 

종류	설명
grid	컨테이너 안의 항목을 블록 레벨 요소로 배치
inline-grid	컨테이너 안의 항목을 인라인 레벨 요소로 배치

 

칼럼과 줄을 지정하는 grid-template-columns, grid-template-row 속성

 

 그리드 컨테이너 안의 항목을 배치할 때 칼럼과 줄의 크기와 개수를 지정하려면 grid-template-columns 속성과 grid-template-row 속성을 사용한다.

 

...
<style>
  #wrapper {
    display : grid;				// 그리드 컨테이너 지정
    grid-template-columns : 200px 200px 200px	// 너비가 200px인 칼럼 3개
    grid-template-rows : 100px			// 줄 높이 100px
  }
...
<div id="wrapper">
  <div class="items">Lorem ... </div>
  <div class="items">Lorem ... </div>
</div>
...

 

상대적인 크기를 지정하는 fr 단위

 

 칼럼이나 줄의 크기를 지정할 때 픽셀(px)을 사용하면 항상 크기가 고정되므로 반응형 웹 디자인에는 적합하지 않기 때문에 상대적인 크기를 지정하는 fr 단위를 사용한다.

 

grid-template-columns : 2fr 1fr 2fr;	// 칼럼의 너비 2 : 1 : 2

 

값이 반복될 때 줄여서 표현할 수 있는 repeat( ) 함수

 

 px 나 fr 단위에서 똑같은 값을 여러 번 반복할 때 repeat( ) 함수를 사용하여 간단하게 표현할 수 있다.

 

grid-template-columns : repeat(3, 1fr);		// 1fr 1fr 1fr

 

최솟값과 최댓값을 지정하는 minmax( ) 함수

 

 줄 높이보다 내용이 더 많으면 minmax( ) 함수를 사용하여 줄 높이를 최솟값과 최댓값을 사용하여 유연하게 지정할 수 있다.

 

grid-template-rows : minmax(100px, auto);	// 줄 높이는 최소 100px

 

자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit 값

 

 칼럼의 너비값과 함께 auto-fit 이나 auto-fill 로 지정하면 화면 너비에 따라 자동으로 칼럼 개수를 조절할 수 있다.

 

 auto-fit 을 사용하면 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시하고, auto-fill 을 사용하면 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둔다.

 

grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));	
// 화면 너비에 맞게 늘려서 칼럼을 표시

 

그리드 항목의 간격을 지정하는 grid-column-gap, grid-row-gap, grid-gap 속성

 

 그리드 레이아웃의 항목과 항목 사이 간격을 조절하려면 아래와 같은 속성을 사용한다.

 

종류	설명
grid-column-gap	칼럼과 칼럼 사이의 간격 지정
grid-row-gap	줄과 줄 사이의 간격 지정
grid-gap	칼럼과 줄 사이의 간격 한꺼번에 지정

 

 grid-gap 속성을 이용해 칼럼과 줄 간격을 한꺼번에 지정할 때, 첫 번째 값은 grid-row-gap 에 해당하고 두 번째 값은 grid-column-gap 에 해당한다.

 

그리드 라인을 이용해 배치하기

 

줄 1  ↘	↙ 칼럼  1	↙ 칼럼  2	↙ 칼럼  3	↙ 칼럼  4
줄 2  ↘	BOX 1
줄 3  ↘	BOX 2	BOX 3
줄 4  ↘			BOX 4

 

종류	설명	예시
grid-column-start	칼럼 시작의 라인 번호 지정	grid-column-start : 1
grid-column-end	칼럼 마지막의 라인 번호 지정	grid-column-end : 4
grid-column	칼럼 시작 번호와 칼럼 끝 번호 사이에 슬래시(/)를 넣어 사용	grid-column : 1/4
grid-row-start	줄 시작의 라인 번호 지정	grid-row-start : 2
grid-row-end	줄 마지막의 라인 번호 지정	grid-row-end : 4
grid-row	줄 시작 번호와 줄 끝 번호 사이에 슬래시(/)를 넣어 사용	grid-row : 2/4

 

BOX 1 : 칼럼 1/4

BOX 2 : 칼럼 1/2

BOX 3 : 칼럼 2/4, 줄 2

BOX 4 : 칼럼 3, 줄 3

 

 항목을 배치할 때 칼럼이나 줄을 하나만 차지할 경우에는 시작 번호만 지정하고 끝 번호는 지정하지 않아도 된다.

 

...
  .box1 {
    background-color : #3689ff;
    grid-column : 1/4;
  }
  .box2 {
    background-color : #00cf12;
    grid-row : 2/4;
  }
  .box3 {
    background-color : #ff9019;
    grid-column : 2/4;
    grid-row-start : 2;
  }
  .box4 {
    background-color : #ffd000;
    grid-column-start : 3;
    grid-row-start : 3;
  }
</style>
...

 

탬플릿 영역을 만들어 배치하기

 

BOX 1
BOX 2	BOX 3
		BOX 4

 

 우선 grid-area 속성을 사용하여 각 영역의 템플릿 이름을 지정한다.

 

 그리고 #wrapper 요소에서 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 지정한다. 템플릿 영역을 비워 둘 때 그 자리에 마침표(.)를 넣고, 한 줄에 들어갈 엠플릿 영역을 큰따옴표(" ")로 묶는다.

 

...
<style>
  #wrapper {
    width : 700px;
    display : grid;
    grid-template-columns : repeat(3, 1fr);
    grid-template-rows : repeat(3, 100px);
    grid-template-areas :
      "box1 box1 box1"		// 한 줄에 들어갈 템플릿 영역을 " "로 묶음
      "box2 box3 box3"
      "box2 . box4";		// 빈 영역은 .을 넣음
  }
...

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)