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

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

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

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
.container {
   display: grid;
   background-color: green;
   grid-template-areas: 'demo demo . . .' 'demo demo . . .';
   padding: 20px;
   grid-gap: 10px;
}
.container > div {
   background-color: orange;
   text-align: center;
   padding: 10px 0;
   font-size: 20px;
}
.ele1 {
   grid-area: demo;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<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-template-areas: 「'demo demo . . .' 'demo demo . . .'」のように記述することで、5列×2行のグリッドレイアウトを定義しています。左側の2列×2行分の領域に「demo」という名前を付け、ドット（.）は空のセルを意味します。
  • grid-area: クラスele1を持つ要素に対してgrid-area: demo;を指定することで、このアイテムが「demo」という名前の領域全体（2×2の範囲）に広がって配置されます。
  • grid-gap: 各グリッドアイテム間に10pxの余白を設けています。

このように領域に名前を付けておくと、HTMLの構造を変更せずにCSSだけでレイアウトを直感的に調整できるため、複雑なグリッドデザインでも可読性と保守性が大きく向上します。

  1. CSSのflex-directionでフレックスアイテムを水平方向に配置する方法

    CSSでフレックスアイテムを水平方向に配置するには、flex-directionプロパティにrow値を指定します。flex-directionは、フレックスコンテナ内のアイテムが並ぶ方向（主軸の方向）を決定する重要なプロパティです。 flex-direction: row の基本 rowはflex-directionのデフォルト値で、アイテムを左から右へ横一列に並べます。なお、文書の書字方向が右から左（RTL）の場合は、逆に右から左へ並びます。 flex-directionで使える主な値 row：アイテムを水平方向（左から右）に配置 row-reverse：アイテムを水平方向（右から左）に配

  2. CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

    grid-templateプロパティとは CSSのgrid-templateプロパティは、グリッドレイアウトにおける行数・列数・各エリア（領域）をまとめて指定できるショートハンドプロパティです。個別にgrid-template-rowsやgrid-template-columnsを設定する代わりに、このプロパティひとつでグリッド構造全体を簡潔に定義できます。 グリッドテンプレートを設定する際は、行と列の数を指定し、あわせてグリッドレイアウト内のエリアも定義します。 grid-templateの構文 grid-templateプロパティの書式は以下のとおりです。 grid-template: