grid 로 레이아웃 잡기

 

 

 

css grid로 레이아웃 잡기

grid는 반응형 페이지 레이아웃을 잡을때 용이하게 사용되지만 ie 버전 11 이상만 지원하고 이전 버전은 지원하지 않는 단점이 있습니다. 언젠가 최적화 될것이라 믿으면 레이아웃 잡기 끝판왕 grid를 공부해 볼까요?!

참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/grid
테스트 사이트 http://cssgridgarden.com

아래 이미지는 테스트 사이트로 적어놓은 GRID GARDEN ( http://cssgridgarden.com )이라는 사이트인데, GRID GARDEN 사이트에 가면 간단한 게임을 통해서 GRID를 쉽게 익힐 수 있으니 먼저  접속해서 GRID를 경험해보시면 좋을 것 같아요.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
   grid-column-start:3;
}

먼저 display:grid; 를 선언해주고 grid-template-area 이나 grid-template-columns, grid-template-rows 등으로 영역 분할을 하고 각 영역 클래스로 가서 그리드 위치를 설정해줍니다.

grid-template-columns는 그리드 영역의 가로를 뜻하고 grid-template-rows는 그리드 영역의 세로를 뜻합니다!!

grid-column-start:3;는 가로기준 3번째 영역을 말하는것이고 grid-column-end를 함께 쓰면 영역이 설정됩니다.
grid-column-start:3; grid-column-end:6;를 한꺼번에 작성하려면 grid-column:3/6; 라고 작성합니다.

grid-row-start:3;는 세로기준 3번째 영역을 말하는것이고 grid-row-end를 함께 쓰면 영역이 설정됩니다.
grid-row-start:3; grid-rows-end:6;를 한꺼번에 작성하려면 grid-row:3/6; 라고 작성합니다.


위의 방법 말고도 각 영역에 네이밍을 해주고 grid-template-area 에서 출력해주는 방식도 있습니다.

.news-article {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 20px 25px 1fr;
    grid-gap: 15px;
    grid-template-areas: "nail heading" "nail time" "nail brief";
}
.news-article .news-nail {
    grid-area: thumbnail;
}