CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSグリッドで行間のギャップサイズを指定する方法（grid-row-gapの使い方）

CSSグリッドレイアウトにおいて、行と行の間隔（ギャップ）を調整するには、grid-row-gapプロパティを使用します。このプロパティに任意の長さの値（px、em、%など）を指定することで、行間のスペースを自由にコントロールできます。

grid-row-gapの基本的な使い方

以下の例では、コンテナにdisplay: grid;を指定してグリッドレイアウトを作成し、grid-row-gap: 50px;によって行間に50pxのギャップを設定しています。あわせてgrid-column-gapで列間にも30pxの間隔を設けています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-auto-rows: 50px;
  grid-column-gap: 30px;
  grid-row-gap: 50px;
  background-color: #95A5A6;
  padding: 10px;
}
.container > div {
  background-color: #F0F3F4;
  text-align: center;
  padding: 10px 0;
  font-size: 20px;
}
.ele3 {
  grid-column-end: span 2;
}
</style>
</head>
<body>
<div class="container">
  <div class="ele1">1</div>
  <div class="ele2">2</div>
  <div class="ele3">3</div>
  <div class="ele4">4</div>
  <div class="ele5">5</div>
  <div class="ele6">6</div>
</div>
</body>
</html>

サンプルコードのポイント

  • grid-auto-rows: 50px;により、すべての行の高さが自動的に50pxに設定されます。
  • .ele3クラスにはgrid-column-end: span 2;が指定されているため、要素「3」は2列分の幅を持って表示されます。
  • コンテナと子要素に異なる背景色を指定することで、行間・列間のギャップが視覚的に確認しやすくなっています。

補足：最新のCSSではgapプロパティが推奨

grid-row-gapは現在では非推奨（deprecated）となっており、代わりにrow-gap、または行間と列間を一括指定できるgapプロパティの使用が推奨されています。

.container {
  display: grid;
  gap: 50px 30px; /* 行間 50px、列間 30px */
}

gapプロパティは「行間 列間」の順に値を指定します。値を1つだけ記述した場合は、行・列の両方に同じ値が適用されます。モダンブラウザでは広くサポートされているため、新規プロジェクトではgapプロパティを使うのが良いでしょう。

  1. CSSのjustify-content：space-betweenでフレックスアイテムの行間にスペースを入れる方法

    CSSのFlexboxレイアウトでは、justify-contentプロパティにspace-betweenという値を指定することで、フレックスアイテム同士の間（行間）に均等なスペースを挿入できます。space-betweenの仕組みspace-betweenを指定すると、最初のフレックスアイテムはコンテナの先頭に、最後のアイテムは末尾に配置され、残りの余白が各アイテムの間に均等に分配されます。これにより、アイテム全体がバランスよく整列した見た目になります。実装例以下のコードを実行して、space-betweenの実際の動作を確認してみましょう。<!DOCTYPE html> <

  2. CSSでグリッドアイテムに名前を設定する方法（grid-areaの使い方）

    CSSでグリッドアイテムに名前を設定するには、grid-areaプロパティを使用し、grid-template-areasプロパティと組み合わせます。まず親要素（グリッドコンテナ）側でgrid-template-areasを使ってレイアウト上の領域に名前を定義し、次に子要素（グリッドアイテム）側でgrid-areaにその名前を指定することで、任意のアイテムを特定の領域へ自由に配置できます。 サンプルコード <!DOCTYPE html> <html> <head> <style> .container { display: grid;