7.2.2 그리드 레이아웃의 기본 속성

그리드 레이아웃의 핵심은 행과 열입니다. HTML에서 표를 만들 때 행과 열을 생각하면 이해하기 쉽습니다.

● display 속성

그리드 레이아웃은 항상 display 속성값을 grid나 inline-grid로 지정하는 것에서 시작합니다.

display:grid; /* inline-grid */

해당 속성이 지정된 요소는 그리드 컨테이너가 되고, 자식 요소는 그리드 아이템이 됩니다.

.grid-container{
  display:grid;
}

기본 개념은 플렉스 박스 레이아웃의 display 속성과 같아서 자세한 설명은 생략합니다.