CSS

grid

grid 설정

grid를 활용하여 배열할 요소들의 부모 요소에 display의 값을 설정한다

display: grid(inline-grid)

column | row 설정

px, rem, em, %, fr 등을 사용하여 각 track의 크기를 설정한다

minmax(최소값, 최대값)
=> 최소값보다는 크고 최대값보다는 작게 설정한다
=> auto값도 가능하다

gap 설정

grid-row(column)-gap을 사용하여 행과 열 사이의 간격을 설정한다

단축 표기법
=> grid-gap: 행간격 열간격

line 기반 배치

=> grid-area의 값을 음수로 주면 마지막 줄부터 선택할 수 있다

순서 설정

flex item의 order와 동일하게 동작한다