【CSS】display:gridの使い方

「display: grid」は、グリッドレイアウトを使用するためのCSSプロパティです。グリッドレイアウトは、要素を行と列に分割し、それらを組み合わせて配置する方法で、レスポンシブデザインやアイデアの配置などに適しています。

使用方法は以下のようになります。

1.HTML要素に「display: grid」を適用する

例:

<div style="display: grid;">
  <div>グリッドアイテム1</div>
  <div>グリッドアイテム2</div>
  <div>グリッドアイテム3</div>
</div>

2.CSSファイルに「display: grid」を適用する

例:

.grid-container {
  display: grid;
}

<div class="grid-container">
  <div>グリッドアイテム1</div>
  <div>グリッドアイテム2</div>
  <div>グリッドアイテム3</div>
</div>

これにより、「div」要素がグリッドコンテナになり、グリッドアイテムが行と列に分割されるように配置されます。

グリッドレイアウトを使用するには、「grid-template-rows」や「grid-template-columns」などのプロパティを使用して、グリッドの行や列の数やサイズを指定することができます。また、「grid-row」や「grid-column」などのプロパティを使用して、グリッドアイテムを配置する位置を指定することもできます。

このように、「display: grid」は、高い柔軟性を持ち、レイアウトを組む際に非常に有効な手段です。