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

CSSグリッドで行のデフォルトサイズを設定する方法（grid-auto-rows活用術）

CSSグリッドレイアウトでは、grid-auto-rowsプロパティを使用することで、暗黙的に生成される行（明示的な定義なしに自動的に作成される行）のデフォルトサイズを設定できます。

カード型レイアウトやリスト表示など、行の高さを統一したい場面で特に便利なプロパティです。grid-template-rowsで定義されていない行にも自動的に適用されるため、柔軟なレイアウト設計が可能になります。

grid-auto-rowsの基本構文

grid-auto-rows: 60px;

値にはpxなどの固定値のほか、auto（コンテンツに合わせて自動調整）、min-content、max-content、%なども指定できます。複数の値をスペース区切りで指定すれば、行ごとに異なるサイズを交互に適用することも可能です。

実装例

以下のコードを実行すると、すべての行が60pxの高さで表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 60px;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.container > div {
background-color: yellow;
text-align: center;
padding: 10px 0;
font-size: 20px;
}
</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>

コードのポイント

  • display: grid; — コンテナ要素をグリッドレイアウトとして設定します。
  • grid-auto-rows: 60px; — 自動生成されるすべての行の高さを60pxに統一します。
  • grid-gap: 10px; — 行と列の間に10pxの間隔を設けます。

この例では6つのdiv要素が縦1列に並び、それぞれの行が60pxの高さになります。ブラウザで表示すると、赤い背景のグリッドコンテナの中に、黄色いボックスが等間隔で整然と配置されていることが確認できます。

  1. CSSのgrid-template-areasプロパティでグリッドレイアウト内の領域を設定する方法

    グリッドレイアウト内に名前付きの領域（エリア）を定義するには、grid-template-areas プロパティを使用します。このプロパティを使うと、グリッドコンテナ内の各セルに名前を割り当て、直感的かつ視覚的にレイアウトを設計できるようになります。 grid-template-areas の基本 まず、配置したい要素に対して grid-area プロパティで領域名を指定し、次にグリッドコンテナ側で grid-template-areas にその領域名とドット（.）を組み合わせてレイアウトを記述します。ドットは「空のセル」を表し、文字列の各行がグリッドの1行分に対応します。 実装例 以下の例で

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

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