grid - 각셀의 영역 지정

<div class="grid-container">
		<div class="grid-item">A</div>
		<div class="grid-item">B</div>
		<div class="grid-item">C</div>
		<div class="grid-item">D</div>
		<div class="grid-item">
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur expedita nemo illum saepe id aliquam. Nisi voluptates quis reprehenderit inventore ad, dicta velit officia alias ullam quisquam, quae beatae, distinctio voluptatibus eveniet dolores facere blanditiis iusto illum! Molestiae qui, facere odio, veritatis quo, aspernatur cum eveniet maxime totam sunt harum.
		</div>
		<div class="grid-item">F</div>
		<div class="grid-item">G</div>
		<div class="grid-item">H</div>
		<div class="grid-item">I</div>
		<div class="grid-item">F</div>
		<div class="grid-item">G</div>
		<div class="grid-item">H</div>
		<div class="grid-item">I</div>
	</div>

.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(100px, auto);
		gap: 1rem;
	}

현재상태에서 셀의 영역지정을 해보자.

.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(100px, auto);
		gap: 1rem;
	}
	.grid-item:nth-child(1) {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 4;
	}

grid-column-start로 시작할 셀의 라인번호
grid-column-end로 끝나는 셀의 라인번호를 입력하여 셀을 합칠 수 있다.

.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(100px, auto);
		gap: 1rem;
	}
	.grid-item:nth-child(1) {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 4;
	}
	.grid-item:nth-child(4) {
		grid-row: 3 / 5;
        /*grid-row: 3 / span 2;*/
	}

grid-row: 3 / 5; 와같이 /로 축약형으로도 입력할수있다.
grid-row: 3 / span 2;
를 쓰게되면 3번라인에서 두칸을 차지하게 해달라는 뜻이된다.

.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(100px, auto);
		gap: 1rem;
	}
	.grid-item:nth-child(1) {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 4;
	}
	.grid-item:nth-child(3) {
		grid-column: 3;
		grid-row: 2;
	}
	.grid-item:nth-child(4) {
		grid-column: 3;
		/* grid-row: 3 / 5; */
		grid-row: 2 /  span 3;
		opacity: .8;
	}

세번째 .grid-item과 네번째 .grid-item을 겹치게 만들어 줄 수도 있다.