[CSS3] 레이아웃 grid 이용하기

grid 로 설정하면 아래와 같은 결과가 나옵니다. 

 

 grid-template-columns 를 이용해 grid의 column들의 넓이를 조정할수 있습니다.

grid-auto-columns/ grid-template-columns 칼럼의 넓이

grid-template-rows/grid-auto-rows 행의 높이

 

grid-template-columns: 200px 200px;  //  grid-template-columns: 200px 100px;  //  grid-template-columns: 200px 100px 100px;

 

 

각각의 그리드 안의 column이 어떻게 배치할지 지정해줍니다.

.item1{ // 
  grid-column-start: 1; //1번라인에서 시작해서
  grid-column-end: 4;  //4번라인까지 차지(총3칸)
  grid-row-start: 1;  //1번라인에서 시작
  grid-row-end: 3; } //3번라인까지 (총 2칸) 아래의 점선 참고.. 
.item2{
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; }

 

 

그리드의 column사이에 여백을 지정하는 grid-row-gap/ grid-column-gap

grid-row-gap:10px;
grid-column-gap:30px;

그리드 겹치게 배치

.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }

.box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; }

 

이때 z-index를 통해 레이어 순서를 지정해주면 된다. 

 

 

grid-area

 

각 그리드아이템마다 grid-area 속성으로 이름을 정해준 후 

 

그리드 값을 주면 원하는 위치에 원하는 넓이로 지정할 수 있다. 

grid: "header header header"
        "nav article ads"
        "footer footer footer"
        / 3fr 2fr 1fr;