플렉스 박스에서 플렉스 컨테이너와 플렉스 아이템으로 나뉜 것처럼그리드 또한 컨테이너와 아이템이 있다. 그중 아이템의 위치와 크기를 정밀하게 제어하는 방법이 있는데 그것이 바로 grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성이다. grid-row-start, grid-row-end, grid-column-start, grid-column-end 그리드 컨테이너에 위치할 아이템의 위치를 정하는 속성이다. 예를 들어 그리드 컨테이너가 체스 판이라고 한다면 그리드 아이템은 체스 말이다.해당 속성은 체스 말을 체스판의 어느 위치에, 어떤 크기로 놓을지 결정하는 역할을 한다. 때문에 해당 속성을 사용할 경우 좀 더 유연하게 레이아웃을 배치할 ..

1. gap그리드 셀 사이의 간격을 설정하는 데 사용된다.gap 속성은 row-gap과 column-gap의 단축 속성으로, 행과 열 사이의 간격을 한 번에 설정할 수 있다.더보기 1 2 3 4 5 6 7 8 9 .grid-container { display: grid; grid-template-columns: repeat(3, 100px); gap: 20px 10px; /* 행 간격: 20px, 열 간격: 10px */ } .grid-item { background-color: #eee; padding: 20px; text-align: ..