Gridカードレイアウト
CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 42/43。
チャレンジ
簡単CSS Gridを使用して、カード用のシンプルな2カラムレイアウトを作成してください。
- カードは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>