[CSS] 행(row)과 열(col)이 있는 display grid 사용하기

1. display grid 기본 사용법

See the Pen grid 기본 사용법 by 김근열 (@raxuybol-the-decoder) on CodePen.

 

 

2. 주요 속성

• grid-gap: row-gap과 column-gap 을 동시에 설정
• row-gap: 행(Row) 간의 간격을 설정
• column-gap: 열(Column) 간의 간격을 설정
• grid-area: 값 순서대로 [시작 행] [시작 열] [끝 행] [끝 열] 값을 나태냄, 즉 코드의 item1 요소는 첫 번째 행의 첫 번째 열부터 시작하여 두 번째 행까지 확장되고, 세 번째 열의 직전까지 차지함

See the Pen grid 주요 속성 by 김근열 (@raxuybol-the-decoder) on CodePen.

 

 

3. 실전 예제

• grid-template-areas: 레이아웃을 직관적으로 정의할 수 있도록 도와주는 속성
• grid-area: 요소를 grid-template-areas 에서 정의된 위치에 배치

See the Pen grid 실전 예제 by 김근열 (@raxuybol-the-decoder) on CodePen.

 

 

✔️ grid 브라우저 지원 여부

CSS grid 는 대부분의 최신 브라우저에서 지원됩니다.