[CSS] GRID (그리드) 사용하기

GRID (그리드) 페이지의 레이아웃(뼈대, 구조)를 여러 주요 영역으로 나누는데 탁월합니다. 저의 경우 그리드를 통해 레이아웃을 하고 플렉스를 통해서 정렬을 합니다. 웬만한건 위 2개의 조합으로 되며, 시간단축도 빨라지고 적응되면 쉽습니다. ※ 그리드와 플렉스를 사용해보지 않았다면, 무조건 사용하길 권장합니다. GRID(그리드) 레이아웃 GRID (그리드) 컨테이너 속성 속성 설명 grid-template-rows 행의 높이(크기, 세로) 예제 grid-template-columns 열의 넓이(가로) 예제 grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성 예제 grid-template "grid-template-columns", "grid-template-areas"의 단축 속성 예제 row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의 예제 column-gap(grid-column-gap) 열과 열 사이의 간격(Line)을 정...

원문링크 : [CSS] GRID (그리드) 사용하기