CSS Grid 학습 회고

오늘은 CSS Grid에 대해 깊이 있게 학습해 보았다. 기존에 사용하던 float이나 flexbox와 비교했을 때, Grid는 더욱 직관적이고 강력한 기능을 제공하여 반응형 웹 디자인에 유용하다는 것을 깨달았다. 처음에는 개념이 조금 어렵게 느껴졌지만, 실습을 해보면서 점점 익숙해졌다.

CSS Grid 기본 개념

CSS Grid는 2차원(가로/세로) 레이아웃을 구성할 수 있는 기술이다. 이를 활용하면 간단한 코드만으로 복잡한 레이아웃을 쉽게 구성할 수 있다. display: grid;를 선언한 후 grid-template-columns와 grid-template-rows를 활용하여 행과 열을 정의할 수 있다는 점이 인상적이었다.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
}

위 코드를 작성하여 3개의 동일한 너비의 열을 가진 Grid 컨테이너를 만들었다. repeat(3, 1fr);을 사용하니 동일한 크기의 열을 쉽게 만들 수 있어서 편리했다.

주요 속성 정리

오늘 학습한 CSS Grid의 주요 속성들을 정리해 보았다.

1. grid-template-columns, grid-template-rows

• 행과 열의 크기를 설정하는 속성이다.
• repeat(), fr, auto 등의 단위를 활용할 수 있다.
• 예제 코드를 직접 작성해 보며 fr 단위가 비율을 조절하는 데 유용하다는 점을 알게 되었다.

2. gap

• row-gap, column-gap을 통합한 속성으로, 그리드 아이템 간의 간격을 조절할 수 있다.
• 기존에는 margin을 이용해 간격을 조정했었는데, Grid에서는 gap을 활용하면 더 깔끔하게 정리할 수 있다는 점이 좋았다.

3. grid-column, grid-row

• 특정 아이템의 배치를 조정할 수 있는 속성이다.
• grid-column-start, grid-column-end와 같은 세부 속성을 포함한다.

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

위 코드를 활용하여 특정 아이템이 1번 열부터 3번 열까지 차지하도록 설정해 보았다. grid-column을 사용하면 특정 영역을 차지하도록 쉽게 지정할 수 있어 편리했다.

4. grid-area

• 여러 개의 grid-row와 grid-column을 조합하여 레이아웃을 보다 직관적으로 구성할 수 있다.
• 이를 활용하여 템플릿 형식의 디자인을 구성해 보았는데, 유지보수가 용이할 것 같다고 느꼈다.

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

이렇게 grid-template-areas를 설정하면 HTML 요소를 직관적으로 배치할 수 있었다. 복잡한 레이아웃을 만들 때 매우 유용할 것 같다.

Grid와 Flexbox의 차이점

Grid와 Flexbox의 차이점도 비교해 보았다.

• Flexbox는 1차원(가로 또는 세로) 레이아웃을 설계할 때 적합하다.
• Grid는 2차원(가로+세로) 레이아웃을 쉽게 만들 수 있다.
• 요소들이 일정한 구조를 가질 때는 Grid가 더 유용하고, 유동적인 정렬이 필요할 때는 Flexbox가 더 적절하다.

예제를 직접 만들어보니 두 기술이 각각의 강점을 가지고 있다는 점을 실감할 수 있었다. 상황에 맞게 적절한 기술을 선택하는 것이 중요하다는 생각이 들었다.

실습하면서 느낀 점

처음에는 Grid의 다양한 속성이 많아 헷갈렸지만, 직접 코드를 작성하면서 점점 익숙해질 수 있었다. 특히 grid-area를 활용하면 전체적인 레이아웃을 쉽게 구성할 수 있다는 점이 좋았다. 앞으로 프로젝트에서 Grid를 적극적으로 활용해 보고 싶다.

오늘 학습한 내용을 블로그에 정리하면서 다시 한번 개념을 복습할 수 있어서 좋았다. 앞으로도 꾸준히 CSS Grid를 활용하여 더욱 효율적인 레이아웃을 구성해봐야겠다!