グリッド基本設定

?
グリッドの基本設定

半角数字を入力するとグリッドがプレビューできます。

この設定は、詳細設定(次の画面のジェネレータ)に引き継がれます。

入力値は、キーボードの「↑」キー、「↓」キーでも変更可能です。

基準幅 px    分割数 分割    余白 px

PREVIEW

カラム幅:

?
カラム幅の端数表示について

プレビュー上に表示されているカラム幅に端数が出る場合は、数学的に演算された理論値で表示されています。

整数チェックで「ブラウザ上の実質幅は整数pxになりません」と表示されている状態では、崩れを起こさないよう各ブラウザが適宜widthを調整することがあります。

その際に各ブラウザのインスペクタ機能で表示されるピクセル数とプレビューの表示値に差異が発生する場合があります。

ブラウザが調整した後の値については各ブラウザのインスペクタを参照するか、JavaScriptで取得してください。

50 px

整数チェック: ブラウザ上の実質幅は整数pxになります ブラウザ上の実質幅は整数pxになりません ×カラムの実数が0px以下になっています ×分割数が0以下になっています ×半角の数値以外が入力されています。

INTEGER GRID

分割数 12・16・24 の全てにおいて整数のカラムになるグリッドを、
基準幅:940px~1280px / 余白:20px~50px の間でまとめた表です。

基準幅(px)/余白(px) 20222426283032343638404244464850
940
968
970
972
974
976
978
980
982
984
986
988
1014
1016
1018
1020
1022
1024
1026
1028
1030
1032
1034
1036
1060
1062
1064
1066
1068
1070
1072
1074
1076
1078
1080
1082
1084
1106
1108
1110
1112
1114
1116
1118
1120
1122
1124
1126
1128
1130
1132
1152
1154
1156
1158
1160
1162
1164
1166
1168
1170
1172
1174
1176
1178
1180
1198
1200
1202
1204
1206
1208
1210
1212
1214
1216
1218
1220
1222
1224
1226
1228
1246
1248
1250
1252
1254
1256
1258
1260
1262
1264
1266
1268
1270
1272
1274
1276

OVER VIEW

独自のCSSグリッドを生成・ダウンロードできるサービスです。
任意のグリッドサイズを指定し、使い慣れたClass名に書き換えて出力できます。

コーディングのみならず、デザイン時のガイド設計ツールとして利用したり、
仕様の共有ツールとしても活用できます。

グリッド基本仕様

  • グリッドの構造は、container、row、col の3要素
  • カラムはfloatで実装
  • containerの初期幅はピクセルによる指定
  • カラムは常時相対値(%)指定
  • 余白(ガター)はカラム内部paddingによるピクセル指定

レスポンシブ対応

  • 専用のブレイクポイントを15個まで設定可能
  • 指定のブレイクポイントでcontainerをフルード化
  • フルード化は、狭い方と広い方の2種類を指定可能
  • フルード化のタイミングで余白の変更が可能
  • オプションClassを「row要素」に付与してカラム制御

対応ブラウザ

IE7 over / Safari / Firefox / Chrome / MS Edge

※floatカラムによるオールドブラウザ対応

※モダンブラウザ用に追加付与しているdisplay:flexのカラム高さ合わせが有効になるかは各ブラウザの仕様に準ずる

VIDEO

DEX-GRIDの概要紹介ビデオです。