[CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1)

제가 최근에 사용했던 CSS 레이아웃 스킬은 조금은 챙피하지만 display: flex; 이게 전부였습니다. 하지만 최근 Grid로 간단하게 레이아웃을 짤 수 있고, 이 방법이 유용하다는 것을 배우면서 확실히 쉽고 직관적으로 할 수 있다고 생각하여 최근에는 자주 애용하고 있습니다.

 

※ CSS grid는 IE, 즉 인터넷 익스플로러에서는 지원하지 않습니다. IE를 대응을 해야되는 분들에게는 display:grid가 아닌 다른 방법으로 레이아웃을 짜는 것을 권장드립니다.

 

1. HTML 코드

<div class="grid-container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

일단 그리드를 그릴 수 있는 HTML 코드를 작성합니다.

 

2. CSS 코드

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

.grid-container div{
  border:1px solid #ccc;
}

• grid-template-columns: 가로칸을 생성  / 위의 코드처럼 100px 100px 100px 이라면 가로 3칸을 생성
• grid-template-rows: 세로칸을 생성 / 위의 코드처럼 100px 100px 이라면 100px의 높이를 가진 세로 2줄을 생성
  • 위의 내용이라면? div가 3X2로 구성된 그리드 형태입니다.

 

3. 결과

이미지 소스까지 넣는다면 이런식으로 3X2의 그리드 레이아웃이 나오게 됩니다. 이렇게 정사각형으로만 놓는다면 그리드가 필요가 없다고 생각합니다. 그리드의 진정한 힘은 바로 특정한 부분을 선택하여 위치, 크기 조절이 가능하기 때문에 그 용도로 사용하는 것이 좋습니다.