data life

grid 각 셀의 영역 지정 grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row Grid 아이템(item)에 적용하는 속성으로, 각 셀의 영역을 지정 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;*/ } .cont..

Grid 간격 생성 column-gap row-gap gap >> Grid cell 사이에 간격을 만들어 줌 .container { row-gap: 10px; /* row의 간격을 10px로 */ column-gap: 20px; /* column의 간격을 20px로 */ gap : 10px 20px; /* row 10px, column 20px */ } HTML 삽입 미리보기할 수 없는 소스