CSS 입문 자료구조

CSS 그리드 레이아웃 기초

CSS 그리드 레이아웃 기초 — 초급

그리드 레이아웃 기초

1. 도입 (왜 배워야 하는가)

그리드 레이아웃은 현대 웹 디자인에서 매우 중요한 요소입니다. 웹 페이지의 요소들을 체계적이고 균형 있게 배치할 수 있도록 도와주며, 복잡한 레이아웃을 쉽게 구현할 수 있게 해줍니다. 특히 반응형 웹 디자인에서 그리드는 각기 다른 화면 크기에 맞춰 콘텐츠를 재배치하는 데 필수적입니다.

만약 그리드 레이아웃을 모른다면, 웹 페이지를 구성할 때 각 요소가 엉망으로 배치되거나, 서로 겹쳐 보이거나, 반응형 디자인이 제대로 이루어지지 않는 문제를 겪을 수 있습니다. 이는 사용자 경험을 저하시킬 뿐만 아니라, 사이트의 신뢰성을 떨어트릴 수 있습니다.

2. 핵심 개념 설명

그리드 레이아웃

그리드 레이아웃은 웹 페이지를 행과 열의 격자로 나누어 요소들을 배치하는 방법입니다. 이를 통해 시각적으로 정돈된 레이아웃을 만들 수 있습니다.

실생활 비유

그리드를 마치 책의 페이지에 비유할 수 있습니다. 페이지가 여러 개의 칸으로 나누어져 있다면, 각 칸에 무엇을 넣을지 쉽게 정할 수 있습니다.

용어	설명
Grid Container	그리드 항목(자식 요소)들을 담는 부모 요소
Grid Item	그리드 컨테이너 안에 위치하는 항목
Track	그리드의 행(row) 또는 열(column)
Cell	행과 열이 교차하는 지점

3. 기본 코드 예제

아래는 가장 기본적인 그리드 레이아웃을 설정하는 코드입니다.

.container {
    display: grid;               / 그리드 레이아웃을 활성화 /
    grid-template-columns: repeat(3, 1fr); / 3개의 열을 만들고, 각 열의 너비를 1fr로 설정 /
    gap: 10px;                  / 각 그리드 아이템 간의 간격을 10px로 설정 /
}

.item {
    background-color: lightblue; / 그리드 아이템의 배경색 설정 /
    padding: 20px;              / 그리드 아이템의 안쪽 여백 설정 /
    text-align: center;         / 텍스트를 중앙 정렬 /
}

실행 결과

그리드 컨테이너 안에 3개의 열이 생성되고, 각 열에 그리드 아이템이 균형 있게 배치됩니다.

코드 한 줄씩 동작 설명

display: grid;: 요소를 그리드 컨테이너로 설정합니다.
grid-template-columns: repeat(3, 1fr);: 3개의 동일한 열을 생성합니다.
gap: 10px;: 각 그리드 아이템 사이의 간격을 10픽셀로 설정합니다.
background-color: lightblue;: 각 그리드 아이템의 배경색을 연한 파란색으로 설정합니다.
padding: 20px;: 아이템의 안쪽 여백을 20픽셀로 설정합니다.
text-align: center;: 텍스트를 중앙에 정렬합니다.

4. 실전 활용 예제

쇼핑몰에서 장바구니를 구현할 때

장바구니에 여러 제품을 그리드 형식으로 나열할 수 있습니다.

.cart-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); / 자동으로 열을 추가 /
    gap: 15px;
}

.cart-item {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

이 코드는 장바구니의 각 아이템을 자동으로 열에 맞춰 배치하고, 화면 크기에 따라 자동으로 조절합니다.

블로그 포스트 미리보기

블로그 포스트를 그리드로 나열할 때도 유용합니다.

.post-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); / 두 개의 열로 구성 /
    gap: 20px;
}

.post-item {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
}

블로그 포스트들을 두 개의 열로 배열하여 시각적으로 깔끔하게 표현합니다.

5. 흔한 실수와 주의사항

실수 1: 그리드 컨테이너를 설정하지 않음

.item {
    display: grid; / 잘못된 설정 /
}

올바른 코드

.container {
    display: grid; / 그리드 컨테이너를 설정 /
}

실수 2: 너비를 명시하지 않음

.container {
    grid-template-columns: repeat(3, auto); / 잘못된 설정 /
}

올바른 코드

.container {
    grid-template-columns: repeat(3, 1fr); / 각 열의 너비를 비율로 설정 /
}

6. 정리

그리드 레이아웃은 웹 페이지를 체계적으로 구성하는 데 매우 유용합니다.
행과 열로 나누어 콘텐츠를 쉽게 배치할 수 있습니다.
자동으로 반응형 형식으로 조정할 수 있습니다.
다음 주제로는 Flexbox를 배워보면 좋습니다. Flexbox는 그리드와 함께 자주 사용되는 레이아웃 기법입니다.

학습