CSS Gridの練習問題

CSS Gridは、ウェブページのレイアウトを作成するための強力なツールです。この練習問題では、CSS Gridを使ってさまざまなレイアウトの作成方法を学びましょう。

1. シンプルなグリッドレイアウト: まずは、シンプルな2x2のグリッドレイアウトを作成してみましょう。以下のコードを試してみてください。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.box {
  background-color: #ccc;
  padding: 20px;
}

2. ネストされたグリッド: 次に、ネストされたグリッドを作成してみましょう。以下のコードを試してみてください。

<div class="container">
  <div class="box">1</div>
  <div class="nested-container">
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nested-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.box {
  background-color: #ccc;
  padding: 20px;
}

3. 自動フィルグリッド: 自動フィルグリッドを使って、可変数の要素をレイアウトする方法も学びましょう。以下のコードを試してみてください。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.box {
  background-color: #ccc;
  padding: 20px;
}

これらの例は、CSS Gridの基本的な使い方を示しています。さまざまなプロパティや値を試してみて、他のレイアウトパターンを作成することもおすすめです。CSS Gridを使うことで、柔軟でレスポンシブなレイアウトを簡単に作成することができます。