CSS: 그리드(Grid) 예제

그리드 레이아웃은 가상의 격자를 만들어 내부에 요소를 배치하는 방법입니다. 웹 페이지의 기본 레이아웃부터 반복해서 배치하는 카드 내부의 요소를 배치하는 등 다방면에 활용할 수 있습니다. 저 또한 대부분의 요소에 그리드를 활용하고 있습니다.

그리드 맛보기

그리드를 사용하여 레이아웃을 배치하는 방식을 살펴봅니다.

웹페이지 레이아웃

body {
  display: grid;
  grid-template-columns: 1fr 650px 200px 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: 
    ". header header ."
    ". main aside ."
    ". footer . .";
}
header {grid-area: header;}
main   {grid-area: main;}
aside  {grid-area: aside;}
footer {grid-area: footer;}

현재 사용하고 있는 티스토리 스킨의 그리드 레이아웃입니다.

사용자 카드

.profile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
}
.img     {grid-area: 1 / 1 / 2 / 3;}
.name    {grid-area: 1 / 2 / 2 / 4;}
.email   {grid-area: 1 / 4 / 2 / 5;}
.hompage {grid-area: 2 / 2 / 3 / 5;}
.desc    {grid-area: 3 / 1 / 4 / 5;}

그리드의 특징

레이아웃 방식은 각각 장단이 있습니다. 그리드 레이아웃의 장점은 동시에 단점이기도 합니다.

• grid-area를 사용하면 자식 요소의 순서에 관계없이 항상 정해진 대로 배치됩니다.
• fr단위를 이용해 %와는 다른 방식으로 비율 관리를 할 수 있습니다.
• 부모(컨테이너)의 템플릿 변경만으로 자식 요소의 배치를 바꿀 수 있습니다. 이 특성은 반응형 웹에 활용할 수 있습니다.
• 격자를 비울 수 있으므로 빈 자리를 채우기 위해 쓸모없는 자식 요소를 늘려야 할 필요가 없습니다.

다음은 그리드 속성을 알아봅니다.