CSS🎨 grid 레이아웃, 형태 정의, 정렬

grid

Flexbox와 마찬가지로 가장 많이 쓰이는 CSS 레이아웃 방법이다. Flexbox는 1차원의 행 또는 열의 레이아웃에 주로 쓰이고, grid는 행x열 2차원의 레이아웃을 배치하는데 적절하다.

!codepen[hahagarden/embed/vYzNyyb?default-tab=css%2Cresult&theme-id=light"]

 

container와 item

부모요소를 grid container라고 하고 grid의 영향을 받는 전체 공간이다. 자식요소를 grid item이라고 하며 설정된 속성에 따라서 아이템들이 배치된다.

 

그리드 형태 정의

container에 정의

• 열, 행 분할: grid-template-columns, grid-template-rows
• 셀 간격 지정: row-gap, column-gap

item에 정의

• 셀 영역 지정: grid-column(-start, -end), grid-row(-start, -end)

 

그리드 정렬

container에 정의

• 아이템들 통째로 묶어서 정렬: align-content, justify-content, place-content
• 아이템들에게 공통적으로 정렬: align-items, justify-items, place-items

item에 정의

• 개별적으로 선택된 셀에만 정렬: align-self, justify-self, place-self

이전 블로그(velog.io/@hahagarden)에서 이전해온 글입니다.