grid로 레이아웃 만들기

1. 그리드 기본개념 예시

grid-template-columns 는 4개, grid-template-rows 는 3개 만들어놔서
12개의 그리드가 생겼다.
HTML에 테두리가 있는 div가 6개 있어서 6개의 네모칸만 보이는 상태이다.

(px 대신 fr 단위를 쓰면 좋다. 전체 n분의 1 범위를 의미한다)

 

 

 

 

 

크롬 개발자도구로 확인하면 12개의 칸이 만들어진 것을 확인할 수 있다.

 

 

 

 

 

 

2. 격자무늬로 만들어진 grid에 범위 지정하는 방법

• grid column lines & row lines 사용 

 

 

See the Pen Untitled by JEONG (@cona) on CodePen.

  grid-column :  1 / 5 (그리드 세로 line을 1~5 까지 차지)
  grid-row : 2 / 4 (그리드 가로 line을 2~4 까지 차지)

 

 

• grid area 사용 

See the Pen grid layout2 by JEONG (@cona) on CodePen.

 사각형 레이아웃만 가능하고 ㄱ 자 배치는 적용되지 않는다.

 

 

아래 코드 추가 시 반응형으로 동작한다.

@media screen and (max-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-rows: 100px 100px 400px;
    grid-template-areas:
      'nav nav nav nav'
      'side side side side'
      'main main main main';
  }
}