CSSを使用した3列のグリッドの作成方法

1. フレックスボックスを使用する方法:

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: flex;
}
.grid-item {
  flex-basis: 33.33%;
  padding: 10px;
}

2. グリッドを使用する方法:

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 {
  padding: 10px;
}

3. 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 {
  padding: 10px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

上記の例では、異なる方法で3列のグリッドを作成する方法を示しています。フレックスボックス、グリッド、およびレスポンシブデザインに対応したグリッドの作成方法を学ぶことができます。これらのコード例を使用して、自分のウェブサイトやブログに3列のグリッドを作成してみてください。