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

CSSのjustify-contentプロパティでコンテナ内のグリッドを整列する方法

CSSでコンテナ内のグリッドを整列する

CSS Gridレイアウトでは、justify-contentプロパティを使用することで、コンテナ内のグリッドトラック（列）を水平方向に整列させることができます。このプロパティは、グリッドコンテナの幅がグリッドトラックの合計幅より大きい場合に特に有効で、余ったスペースをどのように配分するかを指定できます。

justify-contentで使える主な値

  • start … グリッドをコンテナの左端（先頭）に寄せて配置
  • end … グリッドをコンテナの右端（末尾）に寄せて配置
  • center … グリッドをコンテナの中央に配置
  • space-between … アイテム同士の間に均等なスペースを配置
  • space-around … 各アイテムの周囲に均等なスペースを配置
  • space-evenly … すべてのスペースを完全に均等に配置

以下のコードを実行すると、justify-content: space-evenly; を指定した場合のグリッドの整列状態を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: gray;
grid-template-rows: 120px 90px 100px;
justify-content: space-evenly;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: yellow;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</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>

ポイント解説

上記の例では、グリッドコンテナに対して display: grid; を設定し、grid-template-rows で各行の高さを定義しています。そして justify-content: space-evenly; を指定することで、コンテナ内の余白がすべてのグリッドトラックの間に均等に分配され、バランスの取れたレイアウトになります。

垂直方向の整列を行いたい場合は、代わりに align-content プロパティを使用してください。両方を組み合わせることで、コンテナ内のグリッドを自由自在に配置できます。

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

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

  2. CSSでフレックスアイテムをコンテナの中央に揃える方法

    CSSでフレックスアイテム（flexアイテム）をコンテナの中央に配置したい場合は、justify-content プロパティに center を指定します。このプロパティは、主軸（デフォルトでは水平方向）に沿ってフレックスアイテムをどのように配置するかを制御するもので、center を設定すると余白が均等に分配され、アイテム全体がコンテナの中央にまとまります。justify-content の基本的な使い方親要素に display: flex; を適用したうえで、justify-content: center; を追加するだけで、子要素が中央寄せされます。以下は代表的な指定例です。.mycon