CSS Grid レイアウトを使いこなす: grid-template-columns 属性詳解

CSS Grid レイアウトは、柔軟で強力なページレイアウトを実現するためのツールです。その中でも、grid-template-columns 属性は、グリッドコンテナ内の列の幅と数を定義する上で重要な役割を果たします。 この記事では、grid-template-columns 属性の構文、値、使用方法について詳しく解説し、豊富なコード例を交えながら、柔軟で強力なウェブページレイアウトを簡単に作成する方法を学びます。

grid-template-columns とは？

grid-template-columns 属性は、グリッドコンテナに含まれる列の幅と数を定義します。この属性を設定することで、グリッドレイアウトの骨組みとなる列の構造を決定します。

grid-template-columns 属性は、グリッドレイアウトを作成する上で非常に重要な役割を果たします。なぜなら、この属性によって、グリッドアイテムがどのように配置されるかが決まるからです。

grid-template-columns の構文詳解

grid-template-columns 属性には、以下の値を指定することができます。

コード例

例1: 長さ値を使用して固定幅の列を作成する

<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 固定幅の3列 */
  gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}
</style>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

例2: パーセンテージ値を使用してレスポンシブなグリッド列を作成する

<style>
.grid-container {
  display: grid;
  grid-template-columns: 25% 50% 25%; /* パーセンテージで指定 */
  gap: 10px;
}

/* 以下、例1と同じ */
</style>

例3: fr 単位を使用して柔軟なグリッドレイアウトを作成する

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 比率で指定 */
  gap: 10px;
}

/* 以下、例1と同じ */
</style>

例4: repeat() 関数を使用して繰り返しの列定義を簡略化する

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1frの列を3回繰り返す */
  gap: 10px;
}

/* 以下、例1と同じ */
</style>

例5: minmax() 関数を使用して列の幅範囲を制限する

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 2fr) 1fr; /* 中央の列の幅を制限 */
  gap: 10px;
}

/* 以下、例1と同じ */
</style>

例6: auto キーワードを使用して自動調整列幅を実現する

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 両側の列は自動調整 */
  gap: 10px;
}

/* 以下、例1と同じ */
</style>

高度な活用: grid-template-columns を利用した複雑なレイアウトの実現

grid-template-columns は、grid-template-rows や grid-gap などの他のグリッド属性と組み合わせることで、より複雑なグリッドレイアウトを作成することができます。

コード例

例1: 異なる高さのセルを含むグリッドを作成する

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px; 
  gap: 10px;
}

/* 以下、例1と同じ */
</style>

例2: grid-gap 属性を使用してグリッドセル間に間隔を追加する

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* グリッドセル間の間隔 */
}

/* 以下、例1と同じ */
</style>

例3: メディアクエリと組み合わせて、レスポンシブなグリッドレイアウトを作成する

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 画面幅に合わせて列数を調整 */
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 画面幅が狭い場合は1列 */
  }
}
</style>

まとめ

この記事では、grid-template-columns 属性を使用してグリッドレイアウトを作成する方法について解説しました。 grid-template-columns 属性は、グリッドレイアウトを作成する上で非常に重要な役割を果たします。この記事で紹介したコード例を参考に、ぜひ実際に手を動かして、grid-template-columns 属性の柔軟性と強力さを体感してみてください。

参考資料

• <a href="https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns">grid-template-columns - CSS: カスケーディングスタイルシート | MDN</a>
• <a href="http://www.runoob.com/cssref/pr-grid-template-columns.html">CSS grid-template-columns 属性 | 菜鸟教程</a>

CSS Grid レイアウトに関する Q&A

Q1: grid-template-columns と grid-auto-columns の違いは何ですか？

grid-template-columns は、グリッドの明示的な列を定義するのに対し、grid-auto-columns は、明示的に定義されていない列のサイズを指定します。

Q2: グリッドレイアウトをレスポンシブにするにはどうすればよいですか？

メディアクエリを使用するか、fr 単位、repeat() 関数、minmax() 関数などを組み合わせて、画面サイズに合わせてグリッドレイアウトを調整します。

Q3: grid-template-columns で作成したグリッドのセル内のコンテンツを垂直方向に中央揃えするにはどうすればよいですか？

align-items: center; をグリッドコンテナに適用します。