Grid Layout

CSS 그리드 레이아웃(이하 ‘그리드’)은 그리드 기반 사용자 인터페이스 설계 방식을 완전히 바꾸기 위하여 탄생한 2차원 그리드 기반 레이아웃 시스템이다.
웹 페이지를 레이아웃할 때 항상 CSS를 사용하지만 생각만큼 쉽지 않다.
먼저 테이블을 만들고 float, position, inline-block을 사용한다.

하지만 이 모든 것은 근본적으로 세분화되어 있고 여러 중요한 기능(예를 들어 수직 중앙 정렬)이 누락되어 있다. 플렉스박스가 도움이 되지만 복잡한 2차원 레이아웃이 아닌 1차원 레이아웃이기 때문에 한계가 있다(플렉스박스와 그리드는 서로 호환이 잘 된다).

그리드는 지금껏 우리가 웹 페이지를 만들면서 힘들어했던 레이아웃의 문제점을 해결할 수 있는 최초의 CSS 모듈이다.

• 그리드의 컨테이너 요소인 display: grid
• 열과 행 크기 grid-template-columns,grid-template-rows
• 자식 요소인 grid-column, grid-row

Grid Layout 예제

1. 웹페이지 레이아웃

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;}

2. 사용자 카드

.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;}

출처: 더 알아보기
그 외 기본적인 그리드 개념관련