Grid system
Grid system(グリッドシステム)は,12カラムのシステムと,5段階のレスポンシブ,Sassとmixin,いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です
How it works
グリッドシステムは containers, rows, columns でレイアウトと整列を行う。これは flexbox で構築されている。
下記にグリッドの例をしめす。
flexboxは Read this CSS Tricks flexbox guide を参考にしてください。
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>上記の例では, 定義済みのグリッドクラスを使用して , small, medium, large, extra large のデバイスで3つの等幅列を作成しています。
列は親要素の .container を持つページの中央に配置されます。
下記の仕様やBugに注意が必要です。
わかりやすく説明すると
- コンテナは,サイトのコンテンツを中央に配置し水平に埋め込む手段を提供します。全ての viewport とデバイスサイズにわたって固定幅の
.containerまたは全幅の.container-fluid（width: 100%）を使用しています。 - 行(Rows) で 列(columns) を囲みます。各列には, それらの間のスペースを制御するための水平
paddingがあります。paddingはnegative marginsで打ち消されます。これによって列内のすべてのコンテンツが視覚的に左側に整列されます。 - コンテンツは列内に配置する必要があり, 列(columns)のみを行(Rows)の直下の子にすることが可能です。
- Flexboxによって指定された
widthを持たないグリッド列は自動的に等幅列としてレイアウトされます。4つの列は(小のブレークポイント以上で)自動的に25%の幅になります。そのほかの例は auto-layout columns を参考にできます。 - 列は行ごとに12のうちから使用したい列の数を示します。3つの等幅列が必要な場合は
.col-4を使用できます。 - 列の幅
widthは, パーセンテージで設定されているので親要素との相対的な値は常に流動的になります。 - 列には水平方向の
paddingがあり両端に空白を作成しますが.rowに.no-guttersを入れれば, 行からmarginを削除したり, 列からpaddingを削除することができます。 - グリッドレスポンシブは,5つのグリッドブレークポイントがあります。(extra small, small, medium, large, extra large)
- グリッドブレークポイントは, 最小幅のメディアクエリに基づいています。(例
.col-sm-4は small, medium, large, extra large に適用されますが最初のxsブレークポイントにはなりません) - 定義済みのグリッドクラス (例
.col-4)やSassのmixinも使用可能です。
Grid options
Bootstrapではサイズの定義で em か rem 単位を使用していますが, グリッドのブレークポイントとコンテナ幅には px 単位を使用しています。
viewport の幅が px 単位なのと font size のよって変化しないためです。
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (カラムの両側に15px） | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Auto-layout columns
明示的に番号を付けられたクラス(例 .col-sm-6 )がなければ, 簡単な列サイズ設定のためにブレークポイント固有の列クラスを利用します。
Equal-width
例えば, xs から xl までのすべてのデバイスと viewport に適用される2つのグリッドレイアウトがあった場合に
ブレークポイントごとに任意の数のないクラスを追加し,すべての列が同じ幅になるようにします。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>等幅のカラムでは列は複数の行に分割可能です。ただし Safari flexbox bug により flex-basis や border なしでは動作しなかったことがあります。古いバージョンのブラウザでは回避策がありますが, 最新の場合には必要はありません。
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>Setting one column width
任意の1列の幅を設定することができます。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>Variable width content
下記のように col-{breakpoint}-auto を適用すると, コンテンツの自然な幅に基づいて列のサイズを設定できます。
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>Equal-width multi-row
下記のように .w-100 を適用すると数の行にまたがる等幅の列が作成できます。
.w-100 と responsive display utilities を組み合わせてレスポンシブブレークポイントにもできます。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>Responsive classes
レスポンシブ・レイアウトを構築するための5つの階層が定義されています。(extra small, small, medium, large, extra large)
All breakpoints
デバイスの最小サイズから最大サイズまで同じグリッドの場合は .col および .col-* クラスを使用します。
下記のように特定のサイズの列が必要な場合は番号付きクラスの指定します。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>Stacked to horizontal
.col-sm-* を使用すると sm 以上のブレークポイントでは水平に表示できます。
extra small では積み重ねとなります。
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>Mix and match
各階層に異なるクラスの組み合わせを使用できます。下記を参考にしてください。
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>Gutters
ブレークポイント固有のパディングとマイナスのマージンによってレスポンシブに調整ができます。
与えられた行の空白を変更するには .row にマイナスのマージンユーティリティを .col にパディングユーティリティを組み合わせます。
col のpaddingを .px-lg-5 で増やし, 親要素 .row の .mx-lg-n5 でそれを打ち消していている例が下記です。
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>配置(Alignment)
縦と横の列を整列できます。
Vertical alignment
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>Horizontal alignment
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>No gutters
デフォルトのグリッドクラスの列間の空白は .no-gutters で消すことが可能です。
マイナスの margin が .row から削除され, 水平方向の padding がすべての子列から削除されます。
これらの例は下記になります。
- 列の再定義は, 最初の子列のみに参照され attribute selector でターゲットに指定されます。
- 列の
paddingは spacing utilities でカスタマイズが可能です。
端から端までのデザインが必要な場合は .container や .container-fluid を外します。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}他のすべての定義済みのグリッド（列の幅, レスポンシブ階層, 並べ替えなど）でこれを引き続き使用可能です。
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>Column wrapping
1つの行に列の合計が12以上で配置されている場合, 余分な列は新しい行に折り返されます。
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>Column breaks
Flexboxの新しい行に列を分割するには, ハックが必要です。新しい行で折り返したい場合は width: 100% の要素を追加する。これは複数の .row で実行されるが, 全ての実装方法がこれを考慮するわけではありません。
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>responsive display utilities を使用して特定のブレークポントで分割することも可能です。
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>Reordering
Order classes
.order- を使うと 視覚的に順序 を制御できます。これらのクラスはレスポンシブ対応なので, ブレークポイントで order を設定することが可能です。
5つのグリッド層の 0 から 12 のサポートがされています。
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>.order-first と .order-last を適用していレスポンシブにも対応できます。
order: -1 と order: 13 (order: $columns + 1) を適用してい順序の変更も可能です。 .order-* との組み合わせも可能です。
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>Offsetting columns
.offset- と margin utilities の2つの方法で空白を作成可能です。
グリッドクラスはカラムにマッチするようなサイズとなり, margin を用いて, オフセットの幅を可変できるような簡単なレイアウトが実現できます。
Offset classes
.offset-md-* を使用して列を右に移動できます。これらのクラスは, 列の左余白を * 列だけ増加させます。
例えば, .offset-md-4 は4列分 .col-md-4 を移動します。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>列のクリアに加えて空白列をリセットする必要があるかもしれません。the grid example
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>Margin utilities
.mr-auto のようなユーティリティを使用して下記のように間を作ることができます。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>Nesting
グリッドでコンテンツをネストすることができます。 .col-sm-* の中に .row と .col-sm-* を追加します。
ネストされたに行には, 最大12サイズ以内の列を含む必要があります。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>Sass mixins
Sass変数とmixinを使用してカスタムでページレイアウトを作成できます。
デフォルトのクラスではレスポンシブ・レイアウトが簡単に行えます。
Variables
変数とマップは, 列の数, 空白の幅の移動を開始するメディアクエリポイントを決定します。 下記の定義済みのグリッドクラスとカスタムmixinを生成します。
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);Mixins
グリッド変数と使用され, グリッド列に対してセマンティックなCSSを生成できます。
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);Example usage
Sass変数やマップを変更する場合は再コンパイルする必要があります。
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>Customizing the grid
Sass変数とマップを使うと, グリッドクラスをカスタマイズできます。
tiers と media query dimensions の値を変更して, 再コンパイルします。
Columns and gutters
Sass変数によってグリッドの数は修正されます。 $grid-columns は列の幅（パーセント）を生成するために使われます。
$ grid-gutter-widthは空白の幅を設定します。
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;Grid tiers
グリッドの数をカスタマイズすることもできます。 $ grid-breakpointsと$ container-max-widthsを次のように更新します。
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);Sass変数やマップを変更する場合は, 変更を保存して再コンパイルする必要があります。 そうすることで, 列の幅, オフセット, および順序付けのための, あらかじめ定義されたグリッドクラスの新しいセットが出力されます。 また, カスタムブレークポイントを使用するように応答性のある可視性ユーティリティも更新されます。 px（ rem, em, ` %`ではなく）にグリッド値を設定してください。
v4.3