CSS Grid Layout 정보

매우 유연하고 직관적으로 그리드를 표현할 수 있는 CSS Grid. macOS 및 iOS 업데이트로 CSS Grid Layout Module 이 구현된 Safari 버전이 포함되며, CSS Grid 는 마침내 모든 현대 브라우저에서 사용할 수 있게 되었습니다. 

Grid 정의

어느 요소를 그리드 레이아웃 하고 싶을 때, 그 부모 요소에 display: grid 혹은 display: inline-grid 를 지정합니다. 이 부모 요소를 그리드 컨테이너와, 그리드 레이아웃 되는 아이 요소를 그리드 아이템이라고 합니다.

그리드 컨테이너는 grid-template-column와 grid-template-row 라는 속성을 지정할 수 있습니다. 각각, 열과 행의 그리드의 사이즈를 그 수만큼 지정합니다.

예: 3행 5열 격자

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

그리드 컨테이너에 지정할 수 있는 속성

상기 Grid 정의 에서 소개한 프로퍼티 외에 그리드 컨테이너에 지정할 수 있는 자주 사용하는 프로퍼티를 소개합니다.

grid-gap

정확하게 말하자면 grid-gap 은 grid-column-gap 과 grid-row-gap 짧은 버전입니다. 그리드 항목 사이의 열과 행 사이의 여백을 지정합니다.

예: 열은 10px, 행은 15px 여백

.container {
  grid-gap: 10px 15px;
}

justify-items, align-items, justify-content, align-content

이것들은 Flexbox 레이아웃에서도 사용한 속성입니다. 사양적으로는 이것들은 Flexbox 의 것이 아니고, Box Alignment Module 이라고 하는 사양으로, 그리드 컨테이너에서도 사용할 수 있습니다.

그리드 아이템을 정렬시키는 프로퍼티로, CSS Grid 로 사용되는 새로운 것이 아니기 때문에 사용법은 생략합니다.

grid-template-areas

그리드 항목에 이름을 지정하는 속성입니다. 기억할 필요는 없습니다.

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

그리드 항목에 지정할 수 있는 속성

그리드 컨테이너의 아이 요소, 실제로 그리드 레이아웃 되는 그리드 아이템에 대해서 지정할 수 있는 프로퍼티의 소개입니다. 덧붙여서, 그리드 아이템에는 float, clear, vertical-align는 적용되지 않습니다.

grid-column, grid-row

grid-template-column 그리고 grid-template-row 로 그리드를 정의하고 어떤 요소를 어디에 배치할지 결정하는 속성입니다. 정확히는 grid-column 는 grid-column-start 과 grid-column-end 의 짧은 버전으로, grid-row 는 grid-row-start과 grid-row-end짧은 버전입니다. 또한, grid-area 라는 grid-column 과 grid-row 의 짧은 버전도 있지만 grid-column 과 grid-row 만 쓰는 것이 이해하기 쉽다고 생각합니다.

이러한 속성은 그리드 선을 지정합니다.

grid-column는 열, grid-row행의 시작 선과 끝 선을 지정합니다.

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

.item-a {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item-b {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

justify-self, align-self

이것도 Flexbox 레이아웃일 때도 있었습니다. 지정된 그리드 아이템이 정렬되는 프로퍼티입니다.

정리

그리드는 지금까지도 <table> 태그, float, display: inline-block, display: table, Flexbox 등을 사용하여 표현할 수 있었습니다. 그러나 CSS Grid라는 그리드를 위한 사양이 만들어져서, 프리프로세서의 mixin이나 그리드를 위한 프레임워크를 사용하지 않아도 그리드를 만들 수 있게 되었습니다.