[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 옵션 사용