CSS Grid의 정의

1. CSS Grid의 정의

• CSS Grid는 웹 페이지의 요소를 가로(행) 와 세로(열) 두 방향으로 동시에 배치할 수 있게 해주는 2차원 레이아웃 시스템입니다.
• 화면을 보이지 않는 격자(grid) 형태로 나누고, 각 칸(cell)에 요소를 배치할 수 있도록 설계되어 있습니다.
• Grid를 사용하면 요소의 위치, 크기, 정렬을 칸 단위로 제어할 수 있으며, 복잡한 구조도 명확하게 구성할 수 있습니다.
• 간단히 말해, CSS Grid는 화면을 바둑판처럼 나누고 그 칸 위에 요소를 올려두는 방식의 배치 도구입니다.

 

2. 예시

 

• grid를 사용하기 전에는 칸이 일자로 위에서 아래로 배치된 것을 볼 수 있습니다.
• 이를 원하는 형태 4x5 등으로 그리드를 통해 변환할 수 있습니다. 

1:2:1의 비율로 나누기

display: grid;
grid-template-columns: 1fr 2fr 1fr;

 

 

repeate를 통해 나누기

display: grid;
grid-template-columns: repeat(3,1fr);

• 나눌 비율을 1fr 1fr 1fr .. 등으로 쓰면 그 비율에 따라 나뉩니다.
• 하지만 계속 쓰는 게 번거롭다면, repate를 쓸 수 있습니다.

 

3. 결론

구분	함수	코드	설명
기본 설정	display: grid	display: grid;	부모 요소를 Grid 컨테이너로 지정함. 내부 자식 요소들이 격자 구조로 배치됨.
행 정의	grid-template-rows	grid-template-rows: 100px 200px;	세로 방향(행)의 크기를 설정함. 값은 여러 개를 띄어쓰기로 구분함.
열 정의	grid-template-columns	grid-template-columns: 1fr 2fr 1fr;	가로 방향(열)의 크기를 설정함. 비율 단위 fr을 사용하면 유연한 레이아웃 가능.
간격 설정	gap (또는 grid-gap)	gap: 20px;	모든 칸 사이의 간격을 일정하게 설정함. (row-gap, column-gap으로 나눌 수도 있음.)
열 위치 지정	grid-column	grid-column: 1 / 3;	요소가 몇 번째 열부터 몇 번째 열까지 차지할지 설정함.