css gird layout 에대한 정리.

가장 혁신적인 레이아웃을 잡는 획기적인 모듈이라고들 말 한다.  쉽게 웹페이지상의 그리드를 이용하여 특정 위치를 활용할 수 있다.

※ 용어에 대한 정의

  • gird line
  • row line
  • clum line
  • grid treck
  • gird cell
  • grid area

※ 적용방법

display: grid;//

ex 01.) 컨테이너 값에  display: grid 를 선언한 후 css 정의하기

display:grid
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;

ex 02.) 컨테이너 안에 각각의 컬럼을 정의하기 – grid layout 의기준은 grid line의 시작점을 기준으로 합니다.

grid-column: 1 / 4;

※ 가로기준

grid-column-start: 1;
grid-column-end: 3;

※ 세로기준

grid-row-start: 2;
grid-row-end: 4;

  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows