Flexbox가 1차원(한 줄 또는 한 열) 정렬에 강하다면, CSS Grid는 2차원(행과 열) 레이아웃을 구성할 때 특히 강력한 도구입니다. 이번 글에서는 Grid를 사용해 프로젝트 목록을 반응형 카드 레이아웃으로 구성하는 방법을 차근차근 정리해 보겠습니다.
이 방식의 핵심은 화면 너비가 달라져도 카드 배치가 자연스럽게 바뀐다는 점입니다. 작은 화면에서는 한 줄에 1개, 넓은 화면에서는 2~3개 이상이 자동으로 정렬되어 사용자 입장에서 읽기 쉬운 구성을 유지할 수 있습니다. 코드 자체는 비교적 간단하지만, 실제 화면에서의 체감 효과가 커서 포트폴리오나 소개 페이지에 매우 자주 사용됩니다.
1. HTML 구조 먼저 만들기
먼저 Blog1에서 만들어 둔 #projects 섹션 안에 Grid 컨테이너와 카드 뼈대를 추가하겠습니다. 이번 글에서는 텍스트 중심의 기본 카드 구조만 구성하고, 이미지는 다음 글에서 연결하겠습니다.
<section id="projects" class="section">
<div class="container">
<h2>My Projects</h2>
<p>최근 진행한 주요 프로젝트들을 소개합니다.</p>
<div class="project-grid">
<div class="project-card">
<div class="project-info">
<h3>프로젝트 제목 1</h3>
<p>프로젝트 설명이 들어가는 영역입니다.</p>
</div>
</div>
<div class="project-card">
<div class="project-info">
<h3>프로젝트 제목 2</h3>
<p>프로젝트 설명이 들어가는 영역입니다.</p>
</div>
</div>
<div class="project-card">
<div class="project-info">
<h3>프로젝트 제목 3</h3>
<p>프로젝트 설명이 들어가는 영역입니다.</p>
</div>
</div>
</div>
</div>
</section>구조를 먼저 만들어 두면 어떤 요소에 어떤 스타일이 적용되는지 훨씬 명확하게 이해할 수 있습니다.
2. Grid 기본 개념 적용하기
이제 카드들을 감싸는 .project-grid에 display: grid를 선언하고, grid-template-columns로 열의 개수와 너비 규칙을 설정합니다.
핵심은 열 개수를 고정값으로 두지 않고 화면 상황에 따라 유연하게 바꾸는 것입니다. 그래서 repeat, auto-fit, minmax를 함께 사용하면 별도의 복잡한 계산 없이도 반응형 레이아웃을 만들 수 있습니다.
/* style.css */
.project-grid {
display: grid; /* 그리드 레이아웃 시작 */
/*
해석:
1. repeat(auto-fit, ...): 화면 너비에 맞춰 들어갈 수 있는 만큼 열을 자동으로 생성합니다.
2. minmax(280px, 1fr): 각 열의 최소 너비는 280px이고, 공간이 남으면 1fr(비율)만큼 늘어납니다.
-> 즉 좁은 화면에선 1열, 넓은 화면에선 2열, 3열로 자동 변화합니다!
*/
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px; /* 카드 사이 간격 (가로, 세로 모두 적용) */
margin-top: 50px;
width: 100%;
max-width: 1000px; /* 너무 넓게 퍼지지 않도록 최대 너비 제한 */
}gap은 카드 간 간격을 한 번에 제어할 수 있어서 유지보수에 유리합니다. 또한 max-width를 함께 두면 초대형 화면에서도 콘텐츠가 과도하게 퍼져 보이지 않아 안정적인 레이아웃을 유지할 수 있습니다.
3. 프로젝트 카드 스타일링
Grid 배치가 준비되었다면 각 카드의 기본 형태를 잡아줍니다. 배경, 모서리, 그림자, 내부 여백을 정리하면 정보 덩어리가 명확하게 구분됩니다.
/* style.css */
.project-card {
background: white;
border-radius: 15px;
overflow: hidden; /* 자식 요소(이미지)가 둥근 모서리를 넘어가지 않게 자름 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* 떠있는 듯한 그림자 */
transition: transform 0.3s ease; /* 움직임 효과 준비 */
text-align: left;
}
/* 카드 내용 부분 여백 */
.project-info {
padding: 20px;
}
.project-info h3 {
margin-bottom: 10px;
color: var(--dark);
font-size: 1.2rem;
}
.project-info p {
font-size: 0.9rem;
color: #636e72;
line-height: 1.4;
}필요하다면 여기에 :hover 상태를 추가해 카드가 아주 살짝 위로 올라오도록 만들 수 있습니다. 이런 작은 인터랙션은 화면에 생동감을 더해주고, 클릭 가능한 요소라는 인상을 자연스럽게 전달해 줍니다.
마무리
이제 브라우저 창 너비를 조절하면서 카드 배치가 어떻게 바뀌는지 직접 확인해 보세요. Grid의 자동 배치 기능 덕분에 화면 크기에 따라 카드가 자연스럽게 정렬됩니다..
정리하면, 이번 예제의 핵심은 다음과 같습니다. 첫째, HTML 뼈대를 먼저 구성해 구조를 명확히 잡는다는 점. 둘째, repeat(auto-fit, minmax()) 조합으로 열 개수를 자동 제어한다는 점. 셋째, 카드 스타일은 과하지 않게 가독성과 구분감을 중심으로 구성한다는 점입니다.
다음 글에서는 여기에 실제 이미지를 연결하고, 이미지 비율이 깨지지 않도록 object-fit을 적용하는 방법을 이어서 살펴보겠습니다.
감사합니다.