CSS 그리드를 이용한 반응형 카드 레이아웃 만들기
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의 편리함을 다시 한 번 실감했다. 복잡한 레이아웃을 손쉽게 처리할 수 있고, 반응형 디자인도 따로 고민할 필요 없이 자동으로 적용된다는 점에서 매우 만족스러웠다. 이 작업을 통해 앞으로 더욱 다양한 레이아웃을 그리드로 시도해보고 싶다는 생각이 들었다.
이 레이아웃은 기본적인 카드 디자인이지만, 이미지를 추가하거나 호버 효과를 넣는 등 다양한 방식으로 확장할 수 있을 것 같다. 다음에는 좀 더 복잡한 스타일링도 시도해봐야겠다.