CSS Grid layout(레이아웃, 배치)

CSS grid layout: 페이지를 구획, 배치하는 방법

CSS Grid layout은 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분됩니다.
Containter는 Item을 감싸는 부모 요소이고, 그 안에 자식 요소, Item을 배치할 수 있습니다.

---

display

• Grid Container를 정의.
• 레이아웃을 이용하려면 컨테이너의 display의 값은 grid.

display: grid

---

grid-template-columns

• 열의 갯수와 크기를 명시적으로 제시.
• 선의 이름을 정의하지 않더라도, 선 번호 이용 가능.
• 값은 fr(fraction, 공간비율) 단위를 사용하거나, repeat() 함수 사용.

열의 갯수와 크기 설정 속성

열의 개수와 크기 설정

---

grid-template-rows

• 행의 갯수와 크기를 명시적으로 제시.
• 선의 이름을 정의하지 않더라도, 선 번호 이용 가능.
• 값은 fr(fraction, 공간비율) 단위를 사용하거나, repeat() 함수 사용.

행의 갯수와 크기 설정 속성

행의 개수와 크기 설정

 

---