[css] Nicolas, CSS 마스터클래스 (#2-1 Css Grid)(노마드코더 후기)

#2파트는 Grid 파트이다.

Flexbox를 사용하다 보면 새로운 자식컴포넌트가 생성된다면 순서대로 생성되는 것이 아닌 순서가 깨져버리는 모습을 볼 수 있다.

웹사이트의  ui를 구현하기에는 조금 부족한 느낌이 있다.

그래서 사용하는 것이 Grid 이다.

Grid는 테이블의 모습으로 row와 column 형태로 UI를 구현 할 수 있다.

#2 Grid 설명은 반으로 나눌려고 한다.

앞부분은  Grid의 기본적인 사용법이고 후반부는 여러가지 팁들의 대한 사용법을 알려준다.

강의내용중.

- display: grid

- grid-template-columns / grid-template-rows 옵션 사용 (column과 row 값 지정)

- grid-auto-column 옵션 사용 ( 위의 옵션 값 입력 시 auto 옵션을 사용하여 동적으로 생성 가능 _ : 60px)

- grid-auto-flow 옵션 사용 (디폴트는 row!!)

- grid-template-areas 옵션 설정 후 자식은 grid-area 지정으로 사용

- fr 측정 단위 사용 (grid-template-columns: 2fr 1fr 2fr 1fr;)

- repeat(5, 1pr) 반복 사용법

- minmax 사용법 ( grid-template-columns: minmax(400px, 2fr) repeat(3, 1fr)

- max-content / min-content 사용법 (위의 minmax 위치에서 사용)

- auto-fit / auto-fill

- justify-content / align-content / place-content 옵션 사용