grid- 영역 이름으로 그리드 정의 (grid -template-areas)

각 영역에 이름을 붙이고 그 이름을이용해서 배치하는 방법이다.

<div class="grid-container">
		<div class="header grid-item">Header</div>
		<div class="sidebar-a grid-item">Sidebar A</div>
		<div class="sidebar-b grid-item">Sidebar B</div>
		<div class="main grid-item">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptatibus quam rerum facilis sit fuga asperiores totam dolor qui, animi blanditiis recusandae aperiam nemo inventore unde voluptatum officia eveniet at molestiae, exercitationem repudiandae nam eum. In dignissimos ipsam alias deserunt deleniti asperiores inventore nisi consequuntur, minus fuga placeat incidunt necessitatibus voluptatum nostrum tempore, dolorem facilis temporibus recusandae eum eligendi ullam. Itaque quos fugit porro sunt velit? Cumque quod accusantium excepturi earum temporibus vitae incidunt laboriosam magnam ipsa fugiat! Ad rem consectetur, nisi et possimus hic ullam fugit quibusdam molestiae ab quas itaque? Impedit aliquid dolorem ipsa ex quod animi inventore ab, asperiores distinctio nulla ducimus exercitationem accusantium debitis, incidunt cupiditate commodi! Quis modi architecto itaque sequi mollitia cupiditate accusamus fugit explicabo dolorum repellendus consequuntur labore culpa, magnam sunt at obcaecati quisquam exercitationem libero. Architecto officia expedita cupiditate possimus eveniet nemo quibusdam dolor? Commodi tempora accusamus doloremque nisi quasi suscipit non, deleniti veniam illum consectetur libero animi voluptate modi officiis. Nobis cum in soluta provident hic, ullam consequuntur officia ab ipsa quae nihil vitae sapiente est. Aliquam aut odit, facere porro voluptatibus voluptatum dolorum eveniet eius molestias similique, voluptate consequatur provident culpa perspiciatis fuga iusto alias. Dicta soluta ducimus debitis nulla.
		</div>
		<div class="footer grid-item">Footer</div>
	</div>

.grid-container {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-areas: 
			'header header header'
			'sidebar-a main sidebar-b'
			'footer footer footer';
	}
	.header { grid-area: header; }
	.sidebar-a { grid-area: sidebar-a; }
	.sidebar-b { grid-area: sidebar-b; }
	.main { grid-area: main; }
	.footer { grid-area: footer; }

grid-template-areas:
'header header header'
'sidebar-a main sidebar-b'
'footer footer footer';
의 형태로 셀의 개수만큼 해당 위치에 이름을 써주면 됩니다.
빈칸은 none 또는 마침표를 사용해주면됩니다.

.header { grid-area: header; }
.sidebar-a { grid-area: sidebar-a; }
.sidebar-b { grid-area: sidebar-b; }
.main { grid-area: main; }
.footer { grid-area: footer; }

각 영역의 이름은 grid-area 속성을 이용하여 매칭시켜주면 됩니다.