Grid 카드 레이아웃
Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 42번째.
챌린지
쉬움CSS Grid를 사용하여 카드들을 위한 간단한 2열 레이아웃을 만드세요.
- 카드들은 두 개의 동일한 열로 표시되어야 합니다.
- 카드들 사이에 어느 정도의 간격이 있어야 합니다.
직접 해보기
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>