CSS_part2.3_Grid Template Area

Eugenius1st·2022년 1월 17일
0

CSS

목록 보기
11/47

Grid Template Area

먼저 grid 를 설정한다.


이때 grid-template-columns : 200px 200px 200px 200px 이짓을 쉽게하기 위해서
grid-template-columns : repear(4, 200px); 라고 쓰면 훨씬 편하다.

grid-template-areas 는 눈에 잘 보이게 우리의 layout을 디자인 한다.

이렇게 배열하고 각각 class에

grid-area로 이름을 지정해 주면 된다.

content 대신 . 을 넣으면 빈칸이 된다.


auto 는 모든 공간을 사용한다.

main axis, cross axis 를 계산하지 않아도 되서 편리하다.

profile
최강 프론트엔드 개발자가 되고싶은 안유진 입니다

0개의 댓글