flex vs grid

• flex는 1차원적인 구조
  row 혹은 column 중 택1 하여 배치 방향을 결정

• grid는 2차원적인 구조
  row와 column 방향의 배치 방식을 동시에 설정

flex 속성

 flex-direction: 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정

justify-content: 주측 기준으로 요소들의 위치 지정

align-items: 교차축 기준으로 요소들의 위치 지정

flex-wrap: 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 여러행으로 나누어 표현 할 것인지 결정하는 속성

align-content: flex wrap일 경우, 교차축을 기준으로 요소들의 위치와 주위 빈 공간을 배치

display: flex
flex-direction: row | row-reverse | column | column-reverse
justify-content: flex-star | flex-end | center | space-between | space-around | space-evenly
align-items: stretch | flex-start | flex-end | center
flex-wrap: nowrap | wrap | wrap-reverse
align-content: stretch | flex-start | flex-end | center | space-between | space-around 
 

grid 속성

grid-container: grid가 적용된 요소

grid-item: grid가 적용된 요소의 자식 요소들

grid-line: grid-item 사이의 경계를 의미

grid-number: 해당 grid-line이 몇번째 line인지를 의미

grid-template: grid의 행&열의 개수 및 크기를 지정

grid-template-rows: row는 행의 템플릿 지정

grid-template-columns: columns는 열의 템플릿을 지정

grid-column & grid-row: grid-number의 시작점 / 종료점, 각각의 grid-item이 열과 행 방향으로 얼마만큼의 영역을 차지할 지 정의

display: grid
grid-template-columns: repeat(4, 1fr)
grid-column: 1 / 4

* fr: fraction(분수)의 약자로 grid-template에서 사용할 수 있는 비율 단위.
* repeat(): grid-template에 repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미.