グリッドの使用例

1. シンプルなグリッド: 最も基本的なグリッドは、均等な列と行で構成されます。以下は、HTMLとCSSを使用したシンプルなグリッドの例です。

HTML:

<div class="grid-container">
  <div class="grid-item">コンテンツ1</div>
  <div class="grid-item">コンテンツ2</div>
  <div class="grid-item">コンテンツ3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.grid-item {
  background-color: lightgray;
  padding: 10px;
}

この例では、.grid-container がグリッドコンテナを表し、.grid-item が各コンテンツアイテムを表しています。grid-template-columns プロパティは、列の数と幅を指定します。

2. レスポンシブグリッド: グリッドは、レスポンシブなデザインにも適しています。以下の例では、メディアクエリを使用して画面幅に応じて列の数を変更します。

CSS:

.grid-container {
  display: grid;
  grid-gap: 10px;
}
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

この例では、画面幅が 768px 未満の場合は1列、768px 以上の場合は2列、1024px 以上の場合は3列のグリッドが表示されます。

3. アイテムの配置とスパン: グリッドでは、アイテムの配置やスパンも制御することができます。以下の例では、アイテムを特定のセルに配置し、スパンを設定します。

HTML:

<div class="grid-container">
  <div class="grid-item">コンテンツ1</div>
  <div class="grid-item">コンテンツ2</div>
  <div class="grid-item span-2">コンテンツ3</div>
  <div class="grid-item">コンテンツ4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.grid-item {
  background-color: lightgray;
  padding: 10px;
}

.span-2 {
  grid-column: span 2;
}

この例では、.span-2 クラスを持つ要素が2列にスパンし、他の要素と並べて表示されます。

以上がグリッドの使用例とコード例の一部です。グリッドは柔軟なレイアウトオプションを提供し、ウェブデザインやアプリケーション開発において非常に便利です。