【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

最終更新日:2021年09月30日  (初回投稿日:2021年05月29日)

grid-auto-flowプロパティは、Gridアイテムを自動で流し込む方法を制御します。

これは、Gridレイアウトの一番最初の記事、
【62-1】Grid Layout の grid-template-rows, grid-template-columns
でもちょっと紹介しました。

grid-template-rows と grid-template-columnsプロパティで、単にトラックサイズだけ指定したら、アイテムが勝手に左上から自動的に流し込まれました。

これは、grid-auto-flowプロパティデフォルト値rows だから。
rows は、行方向(左上から横方向)にアイテムを自動配置します。
デフォルト値なので、grid-auto-flowプロパティの指定を何もしなくてもブラウザはこのように配置します。

grid-auto-flowプロパティを使って、アイテムを縦並びにしたり、すき間を埋めて並べたりもできます。

本日のINDEX
  1. grid-auto-flowの値
  2. row(デフォルト値)はヨコに自動で流し込む
    1. アイテムが複数のセルにスパンするときの自動配置
    2. 一部のアイテムを固定配置したときの自動配置
  3. column はタテに自動で流し込む
  4. dense は「すき間」を埋めながら自動で流し込む

グリッドレイアウト関連のプロパティは、下記のように記事を分けます。

【62-1】Grid Layout の grid-template-rows, grid-template-columns
(ちょっとメモ)サイズ指定で使う値について (min-content, repeat( ) )
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
【62-3】セルやエリアを一括指定する grid-templateショートハンド
【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ ←今日はココ
【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
【62-9】Grid Layout での order, position-absolute, z-index, margin
(ちょっとメモ)IE10〜Edge15 では Grid Layout の仕様が違う

参考:
CSS Grid Layout Module Level 2 | W3C Editor's Draft
CSS グリッドレイアウト | MDN

grid-auto-flowの値

値はキーワードが3つだけなのでとても簡単です。

grid-template-flowプロパティ
キーワード row がデフォルト値。横方向(左から右)で流し込む
column :タテ方向(上から下)で流し込む
dense :すき間を埋めながら流し込む
グローバル値 inherit 親の値を継承
initial 継承した親の値を解消しデフォルト値に戻す
unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 グリッドコンテナ
(display:grid か display:inline-grid を指定した要素)

値の書き方は、構文ではこうなっています。[ row | column ] || dense

これは、row と column はどっちか1つ(併用不可)
dense は、row か column のどっちかと併用できる。無くても可という意味。

row はデフォルト値なので、指定をしなくても row です。
ですので値を書くとしたら、下の3パターンになります。
・column
・column densedense column も同じ。順不同)
・dense( row dense と同じ)

row(デフォルト値)はヨコに自動で流し込む

grid-auto-flow: row は、アイテムを左上端から横方向に自動配置します。
順序は HTMLで書かれた順番です。
行(row)が埋まると次の行を埋めます。必要なら新しい行を作って埋めていきます。

サンプルで試してみます。
まずは、HTMLでアイテムを6個用意します。

<div class="container">  <!--containerというクラス名を付けました-->
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSSで、2行・3カラムのグリッドを指定します。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  }
.container div{padding:1em;text-align:center}	
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}
.container div:nth-child(5) {background:#cff}
.container div:nth-child(6) {background:#ffebcd}

プレビューはこちら。
グリッドを作っただけで、アイテムの配置に関しては何も指定していませんが、アイテムは左上から横方向に自動配置されています。

A
B
C
D
E
F

これは下記のように書いたのと同じです。
grid-auto-flow を書くなら Gridコンテナ側(親)に書きます。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-flow: row;
  }

アイテムが複数のセルにスパンするときの自動配置

1アイテムが 1セルでなく複数セルにスパンしていたら、grid-auto-flow はそれを避けて なるべく HTML順に自動配置します。

CSSをこのように指定してみました。
grid-auto-flow は指定していないので row です。
2番目のアイテム(B)をタテにスパンしました。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  }
.container div:nth-child(2) {
  grid-area: span 2;
  }

grid-area: span 2 は、自動配置を利用したまま行方向は2セルにスパンする指定です。
詳しくはこちら→【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

プレビューはこちら。
E はちゃんと Bを避けて並んでますね。

A
B
C
D
E

一部のアイテムを固定配置したときの自動配置

一部のアイテムが固定配置されていたら、それ以外のアイテムを自動配置します。

CSSはこちら。
grid-auto-flow は指定していないので row です。
2番目のアイテム(B)と、4番目のアイテム(D)を、左側に寄るように固定配置しました。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  }
.container div:nth-child(2) {
  grid-area: 1 / 1;
  }
.container div:nth-child(4) {
  grid-area: 2 / 1;
  }

grid-area: 1 / 1 は、行のスタートはライン1、カラムのスタートはライン1という意味。
終わり側を指定していないので auto = 1セルになります。
詳しくはこちら→【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

プレビューはこちら。
BとDは固定位置に、それ以外はそれらを避けて自動配置されます。

A
B
C
D
E
F

column はタテに自動で流し込む

grid-auto-flow: column は、アイテムを左上端からタテ方向に自動配置します。
順序は HTMLで書かれた順番です。
カラムが埋まると次のカラムを埋めます。必要なら新しいカラムを作って埋めていきます。

CSSで grid-auto-flow: column を指定します。

.container{
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-flow: column;
  }

プレビューはこちら。タテ方向に自動でセルに流し込まれます。

A
B
C
D
E
F

dense は「すき間」を埋めながら自動で流し込む

まずこちらを見てください。
Aの下に すき間ができています。自動配置だとたまにこんな事も起こります。

A
B
C
D
E
F

grid-auto-flow: dense を指定すれば、ほかのアイテムを前へ戻らせて「すき間」を埋めてくれます。HTML順になるべく近いアイテムですき間を埋めます。

A
B
C
D
E
F

CSSはこちら。

.container{
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense; /*すき間を埋める指定*/
  }
.container div:nth-child(2) { /*2番目のアイテム(B)*/
  grid-area: span 2;   /*自動配置のままタテ方向に2セルスパン*/
  }
.container div:nth-child(3) { /*3番目のアイテム(C)*/
  grid-area: span 2;   /*自動配置のままタテ方向に2セルスパン*/
  }
.container div:nth-child(4) { /*4番目のアイテム(D)*/
  grid-area: auto / span 2;   /*自動配置のまま横方向に2セルスパン*/
  }

grid-auto-flow: dense column も試してみます。
このすき間が、

A
B
C
D

埋まりますね。

A
B
C
D

CSSはこちら。

.container{
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-auto-flow: dense column; /*すき間を埋める指定とタテ方向の自動配置*/
  }
.container div:nth-child(1) { /*1番目のアイテム(A)*/
  grid-area: auto / span 2;   /*自動配置のまま横方向に2セルスパン*/
  }
.container div:nth-child(3) { /*3番目のアイテム(C)*/
  grid-area: span 2;   /*自動配置のままタテ方向に2セルスパン*/
  }

次回予告

次回は、grid-auto-rowsgrid-auto-columnsプロパティを使おう。
これは、グリッドからはみ出したアイテムトラックサイズをあらかじめ決めておけるプロパティです。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.