CSS layout(구조, 배치) Grid 기초 정리

web에서 구조를 만들거나 배치를 할 때 사용되는 Grid에 대해 알아보자. Grid를 가지고 굉장히 다양한 방법을 활용하고 복잡하게 만들 수도 있다. 그러나, 이 글을 보고 있는 대부분의 사람들은 기초 수준일 것이라 판단된다. 따라서 바로 적용가능하고 쉬운 부분위주로 짧고 쉽게 적어보겠다.

 

 

0. 들어가면서

 보통 Grid 요소에서는 부모요소와 자식요소로 나누어 부른다. 부모요소를 Grid Container라고 부르고, 자식 요소는 Grid Item이라고 부른다. 이렇게 나누는 이유는 부모요소에 Grid라는 틀을 부여하고, 그 틀에 맞게 자식요소가 들어간다고 생각하면 될 것 같다. 우선은 기본 셋팅부터 하자.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
</div>

 

사용법은 간단히 아래와 같이 display: grid; 라고 적어주기만 하면된다.

 

.container {
    display: grid;
}

 

 

 

 

1. Grid 기초

.container {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px 100px;
}


.container {
    display: grid;
    width: 300px
    grid-template-rows: 100px 100px;
    grid-template-columns: 1fr 1fr 1fr;
}

• grid-template-rows: 100px 100px; : 행을 2개를 만드는데 100px로 만들겠다는 의미이다.
• grid-template-columns: 100px 100px 100px; : 열을 3개 만드는데 각각을 100px로 만들겠다는 의미이다.

 

 

2. Grid 간격 띄우기

.container {
    row-gap: 10px;
    column-gap: 20px;
}

• row-gap: 10px;  : 세로 간격을 10px로 만든다
• column-gap: 20px; : 가로 간격을 20px로 만든다.

 

3. Grid items 병합하기

위의 내용은 각각의 grid로 나누는 방법에 대해 알아봤다. 그렇다면, 각각의 나눈 여역을 합치는 작업을 해보자.

 

.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-template-areas:
    "header header header"
    "main . aside"
    ". . footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

• grid-template-areas 영역에 우리가 원하는 위치에 붙어서 넣어주면 합쳐진다.
• 이때, 마침표(.)는 item 영역을 빈칸으로 두는 것이라고 할 수 있다.