Grid system
Grid system(グリッドシステム)は,12カラムのシステムと,5段階のレスポンシブ,Sassとmixin,いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です
How it works
グリッドシステムは containers, rows, columns でレイアウトと整列を行う。これは flexbox で構築されている。
下記にグリッドの例をしめす。
flexboxは Read this CSS Tricks flexbox guide を参考にしてください。
One of three columns
One of three columns
One of three columns
<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>
Equal-width multi-line
列を改行したい場所に .w-100
を挿入して、複数行の等幅の列を作成できます。
.w-100
と responsive display utilities を組み合わせることでレスポンシブに組むことができます。
Safari flexbox bug によって, flex-basis
or border
なしではこれが機能しませんでした。
古いバージョンのブラウザーには回避策がありますが, ターゲットのブラウザーがバグのあるバージョンに該当しない場合は必要ありません。
<div class= "container" >
<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>
</div>
Setting one column width
任意の1列の幅を設定することができます。
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
<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
を適用すると, コンテンツの自然な幅に基づいて列のサイズを設定できます。
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
<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
各階層に異なるクラスの組み合わせを使用できます。下記を参考にしてください。
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
<!-- 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
でそれを打ち消していている例が下記です。
Custom column padding
Custom column padding
<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>
Row columns
レスポンシブな .row-cols-*
を使用して, コンテンツとレイアウトを最適にレンダリングする列の数を設定します。
通常の .col-*
は個々の列(たとえば, .col-md-4
)に適用されますが, 行列クラスはショートカットとして親 .row
に設定されます。
これらの行列クラスを使用して, 基本的なグリッドレイアウトの作成やカードレイアウトの制御ができます。
Column
Column
Column
Column
<div class= "container" >
<div class= "row row-cols-2" >
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
</div>
</div>
Column
Column
Column
Column
<div class= "container" >
<div class= "row row-cols-3" >
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
</div>
</div>
Column
Column
Column
Column
<div class= "container" >
<div class= "row row-cols-4" >
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
</div>
</div>
Column
Column
Column
Column
<div class= "container" >
<div class= "row row-cols-4" >
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col-6" > Column</div>
<div class= "col" > Column</div>
</div>
</div>
Column
Column
Column
Column
<div class= "container" >
<div class= "row row-cols-1 row-cols-sm-2 row-cols-md-4" >
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
<div class= "col" > Column</div>
</div>
</div>
Sassミックスインで row-cols()
を使用することもできます。
.element {
// Three columns to start
@include row-cols ( 3 );
// Five columns from medium breakpoint up
@include media-breakpoint-up ( md ) {
@include row-cols ( 5 );
}
}
Alignment
縦と横の列を整列できます。Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height
as shown below. See Flexbugs #3 for more details.
Vertical alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<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>
One of three columns
One of three columns
One of three columns
<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
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<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
がすべての子列から削除されます。
これらの例は下記になります。
端から端までのデザインが必要な場合は .container
や .container-fluid
を外します。
.no-gutters {
margin-right : 0 ;
margin-left : 0 ;
> .col ,
> [ class *= "col-" ] {
padding-right : 0 ;
padding-left : 0 ;
}
}
他のすべての定義済みのグリッド(列の幅, レスポンシブ階層, 並べ替えなど)でこれを引き続き使用可能です。
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
<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以上で配置されている場合, 余分な列は新しい行に折り返されます。
.col-9
.col-4 Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6 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
で実行されるが, 全ての実装方法がこれを考慮するわけではありません。
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<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 を使用して特定のブレークポントで分割することも可能です。
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<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
のサポートがされています。
First, but unordered
Second, but last
Third, but first
<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-*
との組み合わせも可能です。
First, but last
Second, but unordered
Third, but first
<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
を移動します。
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
<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
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<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
のようなユーティリティを使用して下記のように間を作ることができます。
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-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サイズ以内の列を含む必要があります。
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
<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 );
}
}
Main content
Secondary content
<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
, ` %`ではなく)にグリッド値を設定してください。