グリッドの基本的な設定方法と、アイテムのレイアウト。
参考ページ
グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN
Androidアプリを作成しました。
感情用のメモ帳です。
グリッドとは
グリッドは、複数の要素を二次元的――複数の行や列に並べるためのレイアウトです。
フレックスボックスでも折り返せば、二次元的なレイアウトができますが、複雑なレイアウトならグリッドのほうが設定しやすいと思います。
迷ったら、一行や一列のレイアウトはフレックス、それ以上ならグリッド。
グリッドの作成
並べたいものをdivなどのコンテナに入れ、そのコンテナに対して「display: grid;」を設定します。
<div class="grid-box">
<div>ボックス１</div>
<div>ボックス２</div>
<div>ボックス３</div>
<div>ボックス４</div>
<div>ボックス５</div>
</div>.grid-box {
display: grid;
border: 1px solid;
}
.grid-box div {
border: 1px solid;
background-color: rgb(191, 226, 240);
}ここから列や行を設定していきます。
列と行の設定
列
列を定義するには「grid-template-columns」を使用します。
.grid-box1 {
display: grid;
grid-template-columns: 20% 20% 20%;
border: 1px solid;
}ここではwidthの20％で、列トラックを3つ設定しています。
他にも、決まったサイズの列が4つなら「100px 50px 200px 30px」のように値を書きます。
同じ長さや比率のアイテムを設定するときにはリピート記法を使うと、この上の表記は、grid-template-columns: repeat(3, 20%);と書き換えることもできます。
5つあるアイテムが3つ並べられ、残りの2つは次の行に配置されました。
長さの単位は併用可能で、pxや%などのほかに、追加で「fr」という単位が使えます。
frは、利用可能な空間の比率で、たとえば「1fr 1fr 1fr」と書いた場合、利用可能な空間を三等分した列を配置、「2fr 2fr 1fr」であれば、五等分して2、2、1の比率で振り分けてトラックが作成されます。
行の高さ
一行に並びきれないアイテムがあったとき、つぎの行は自動で作成され、残りのアイテムはそちらに並べられました。
このときの行の高さは、アイテムの内容によって異なります。
ボックス３－２
自動で設定される行の高さは、「grid-auto-rows」で変更します。
.grid-box2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
border: 1px solid;
}ボックス３－２
行
grid-template-columnsで列を設定しておくと、アイテムの数によっては、次の行が自動的に（暗黙的に）作成されていました。
「grid-template-rows」を使い、明示的な行の設定ができます。
.grid-box3 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 50px);
border: 1px solid;
}アイテムが入ってない3行目が作成されています。
アイテムのレイアウト
アイテムを自分のイメージ通りに並べるには、グリッド線を使う方法と、グリッドテンプレート領域を使う方法があります。
グリッド線
グリッド線は以下のように番号が振られています。
日本語や英語の場合、列番号は左から右に１からはじまります。
画像は4列あり、最後の列番号は5。
行番号は、いちばん上が1、下に行くにつれ加算されていきます。
画像は2行で、末尾の番号は3です。
たとえば上の「ボックス１」を「ボックス３」の端まで横に広げたい、とします。
やり方は、コンテナではなくボックス１に対して、列の開始位置を指定するプロパティ「grid-column-start」を1に設定し、終了位置を指定する「grid-column-end」を4にします。
「ボックス１」を縦に伸ばしたいなら、行の開始位置のプロパティ「grid-row-start」を1に、行の終了位置のプロパティ「grid-row-end」を3にします。
Ｌ字のような形にはできず、四角形でなければ適用されません。
これらには一括指定プロパティがあります。
「grid-column: 開始 / 終了;」
「grid-row: 開始 / 終了;」
では、具体的にやってみましょう。
以下の画像のようなレイアウトにしてみたいと思います。
グリッドを「６✕６」に設定し、５つのアイテムを配置します。
要素には「one」のように名前を付け、先のプロパティを指定していきます。
<div class="grid-box4">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>.grid-box4 {
display: grid;
grid-template-columns: repeat(6, 10vmin);
grid-template-rows: repeat(6, 10vmin);
width: fit-content;
border: 1px solid;
}
.one {
grid-column: 1 / 3;
grid-row: 1 / 4;
}
.two {
grid-column: 3 / 5;
grid-row: 1 / 3;
}
.three {
grid-column: 5 / 7;
grid-row: 1 / 7;
}
.four {
grid-column: 1 / 3;
grid-row: 4 / 7;
}
.five {
grid-column: 3 / 5;
grid-row: 5 / 7
}図を見ながら設定するのであれば、難しいことはないですね。
「grid-area」で、行と列の両方を一括指定することができます。
grid-area: row-start / column-start / row-end / column-end;
.one {
grid-area: 1 / 1 / 4 / 3;
}
グリッドテンプレート領域
次のようなプロフィール用のレイアウトを考えたとします。
上では３つのエリアがあります。
これに対応するように要素を３つ配置します。
<div class="grid-box5">
<div class="my-image"></div>
<div class="my-profile"></div>
<div class="specialty"></div>
</div>次に、この各要素に「grid-area」を使って、エリアに名前を付けます。
.my-image {
grid-area: img;
}
.my-profile {
grid-area: pr;
}
.specialty {
grid-area: sp;
}今度は「grid-template-areas」で、グリッドのトラックとレイアウトが対応するように、エリア名を配置します。
.grid-box5 {
display: grid;
grid-template-columns: repeat(7, 10vmin);
grid-auto-rows: 10vmin;
grid-template-areas:
"img img img pr pr pr pr"
"img img img pr pr pr pr"
"img img img pr pr pr pr"
"img img img sp sp sp sp"
". . . sp sp sp sp";
width: fit-content;
border: 1px solid;
}すべてのグリッドのトラックにエリア名を置いています。
ドットのところは空白になります。