css gird layout 에대해 정리해보자

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

※ 용어에 대한 정의

※ 적용방법

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;