CSS 그리드를 이용한 반응형 카드 레이아웃 만들기

소요 시간: 5분

CSS Grid를 활용해 반응형 카드 레이아웃을 만들어 보았다. 처음에는 그리드가 조금 낯설었지만, 막상 써보니 정말 유용한 도구였다. 특히 웹페이지의 레이아웃을 자유롭게 구성하고, 반응형 디자인을 간단하게 처리할 수 있다는 점이 인상깊었다.


HTML 구조 작성

우선, HTML 구조부터 잡았다. 각 카드는 그리드 안에서 배치될 것이고, .container라는 부모 요소에 담겼다. .card라는 클래스를 가진 6개의 카드가 각각 이 그리드 안에서 배치되도록 설정했다. 아래는 내가 작성한 HTML 코드다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 카드 레이아웃</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
        <div class="card">Card 5</div>
        <div class="card">Card 6</div>
    </div>
</body>
</html>

이렇게 간단한 구조로 각 카드를 정의한 후, 이제 CSS를 적용해 레이아웃을 잡아주었다.


CSS Grid 적용

CSS에서는 가장 먼저 .container에 display: grid를 적용했다. 그리드를 활성화함으로써 각 카드가 그리드 시스템 안에서 자유롭게 배치되도록 했다. grid-template-columns 속성에서 repeat(auto-fill, minmax(200px, 1fr))를 사용했는데, 이 덕분에 카드의 최소 크기가 200px로 유지되면서 화면 크기에 맞춰 자동으로 배치되도록 했다.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

이 설정 덕분에 브라우저의 크기에 맞춰 카드가 유동적으로 배치되었다. 큰 화면에서는 더 많은 카드가 한 줄에 배치되고, 작은 화면에서는 카드의 수가 줄어들어 자연스러운 반응형 레이아웃을 완성할 수 있었다.


카드 디자인

카드 디자인은 깔끔하고 심플하게 유지하려고 했다. 흰색 배경에 그림자와 둥근 모서리 효과를 추가해, 깔끔하면서도 눈에 띄는 디자인을 목표로 했다.

.card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 18px;
}


반응형 디자인

CSS Grid의 가장 큰 장점은 바로 반응형 디자인을 매우 쉽게 구현할 수 있다는 점이었다. 나는 이미 grid-template-columns에서 auto-fill과 minmax를 사용했기 때문에 추가적인 미디어 쿼리 없이도 카드 레이아웃이 화면 크기에 따라 자동으로 변했다. 큰 화면에서는 더 많은 카드를 한 줄에 배치하고, 작은 화면에서는 줄 수가 자연스럽게 늘어나며 매우 유연한 레이아웃을 완성할 수 있었다.


이번 작업으로 CSS Grid의 편리함을 다시 한 번 실감했다. 복잡한 레이아웃을 손쉽게 처리할 수 있고, 반응형 디자인도 따로 고민할 필요 없이 자동으로 적용된다는 점에서 매우 만족스러웠다. 이 작업을 통해 앞으로 더욱 다양한 레이아웃을 그리드로 시도해보고 싶다는 생각이 들었다.

이 레이아웃은 기본적인 카드 디자인이지만, 이미지를 추가하거나 호버 효과를 넣는 등 다양한 방식으로 확장할 수 있을 것 같다. 다음에는 좀 더 복잡한 스타일링도 시도해봐야겠다.


CSS 리스트