주요 프로퍼티 display: grid; grid-template-columns: 60px 60px;
주요 설명 (wrapper 부분에서)
display:grid; //바로 자식노드는 grid로 동작하게 된다.
/* 가로의 설정(+너비) : 100px 로 3개의 column 이 되도록 함 */
grid-template-columns: 100px 100px 100px; //자식 노드가 늘어나도 세로의 갯수는 변하지 않고 3개로 고정된다.
/* 세로의 설정(+높이) : 100px 로 3개의 row가 되도록 함 */
grid-template-rows: 100px 100px 100px ; //지정된 3개가 초과되면 밑으로 계속 위치하게 되지만, 높이는 설정값 없이 동작한다.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
11
주요 설명 (자식노드(item) 부분에서)
그리드 내에서의 절대위치
grid-column: 1 / 3; //그리드 라인은 1부터 시작하며 3개의 columns일 경우 grid-line 기준으로 1,2,3,4 까지 지정 할 수 있다.columns 과 grid lines은 개념이 다르다.
grid-column-start: 1;grid-column-end: 3; //이와 같이 풀어 쓸 수 있다.
grid-row: 1 / 2; //row의 gird lines 기준 1~3까지의 영약을 차지한다.
grid-row-start: 1;grid-row-end: 2; //이와 같이 풀어 쓸 수 있다.
//grid-lines는 선을 그었을 때 그 선의 순서이다. 3개의 columns인 경우 4개의 grid-line이 생긴다.
1/2는 1과 같고 2/3은 2와 같다.
1/-1 과 같이 표현할 수 있다. -다 붙으면 반대쪽 grid lines에서 순서를 센다.
grid line :1
grid line :1
1
grid line:2
2
grid line:3
grid line:4
3
grid line :2
grid line :3
4
5
6
grid-column: 1 / 3; grid-row: 1/3;
2
3
grid-column:3; grid-row: 2/4;
5
6
7
8
9
주요 설명
grid-area: string; //자식노드에서 지정하면 그리드 Style에서 해당 string을 사용할 수 있다.
grid-template-areas: "head head head" //grid area의 값으로 좀 더 직관적으로 레이아웃을 잡을 수 있다.
"nav main main"
"nav foot foot";
head
main
foot
nav
5
6
7
8
9
주요 설명
//grid의 채워지는 방향을 지정한다.
// dense를 붙일 경우 최대한 빈 칸 없이 채우기를 한다.
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;