grid 각 셀의 영역 지정

grid 각 셀의 영역 지정

• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row

Grid 아이템(item)에 적용하는 속성으로, 각 셀의 영역을 지정

Grid 라인 번호

Grid 라인 번호를 이용해서 column과 row의 범위를 결정

.grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, 100px);
	grid-template-rows: repeat(4, 100px);
}
.header {
	grid-column-start: 1;
	grid-column-end: 5;
    /*grid-column: 1 / 5;*/
    /*grid-column: 1 / -1;*/
}
.content {
	grid-column-start: 1;
	grid-column-end: 4;
    /*grid-column: 1 / 4;*/
    /*grid-column: 1 / -2;*/
}
.footer {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 5;
    /*grid-column: 1 / 5;
	grid-row: 4 / 5;*/
}

 

span : 몇 개의 셀을 차지하게 할 것인지 결정

⭐️ 시작점 정해주기!!⭐️

.content {
	grid-column: 2 / span2;
}