sliver__

CSS Grid는 이차원(2D) 레이아웃을 위해 설계된 CSS 모듈로, 컨테이너를 행(row)과 열(column) 로 나누고 그 안에 아이템을 자유롭게 배치할 수 있게 해 줍니다.Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 복잡한 그리드 구조를 더 적은 코드로 구현할 수 있어 UI 설계의 혁신을 가져왔습니다.핵심 용어Grid Container: display: grid 또는 inline-grid를 선언한 부모 요소Grid Items: 컨테이너의 직속 자식 요소들Grid Lines: 행과 열을 나누는 가상의 선, 1부터 열 개수+1, 행 개수+1까지 번호 매김Grid Cells: 교차하는 그리드 라인 사이의 사각 영역(셀)Grid Tracks: 하나의 행(row track) 또는 열(colu..

CSS Grid는 이차원(2D) 레이아웃을 위한 최신 CSS 모듈로, 단 몇 줄의 코드만으로도 복잡한 구조를 쉽게 구현할 수 있습니다.display: grid를 통해 그리드 컨테이너를 선언하고, grid-template-columns/grid-template-rows로 열과 행(track) 의 크기를 직접 설정합니다.또한 gap 속성으로 열·행 간격(gutter)을 일괄 지정할 수 있으며, column-gap과 row-gap을 통해 축별로 서로 다른 간격도 정의할 수 있습니다.1. Grid 컨테이너 선언하기.container { display: grid;}grid 또는 inline-grid 값을 주면 해당 요소가 그리드 컨테이너가 되고,그 직속 자식들이 그리드 아이템이 됩니다.이 선언만으로는 시각적 변..