Grid 핵심정리 #7 - 영역 이름 사용하기

이 게시글은 [CSS Flex와 Grid 제대로 익히기]의 강의를 보며 정리한 내용입니다.

출처: https://www.inflearn.com/course/css-flex-grid-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B5%ED%9E%88%EA%B8%B0/dashboard

CSS Flex와 Grid 제대로 익히기 강의 | 1분코딩 - 인프런

출처: https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

---

 

 

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}
.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의하세요 */

 

이렇게 정의하므로써 이미지의 Grid를 만들 수 있다