基本となるレスポンシブなグリッドについてです。使ったことのある方であれば、違和感なく使い始めることができると思いますが、基本的な構成は以下。実際の挙動はデモを見ていただきたいのですが、それぞれのブレイクポイントで各カラム間の余白が微妙に変わっていることが分かると思います。空きすぎだよなぁという場面もあるので、それぞれ変化を付けられるのは重宝します。全てのブレイクポイントで基本的には余白が変わることが前提となるので、以下のようにカラム指定の省略は不可です。col-lg-4">...</div>クラス数の指定が増えてしまうのは気になるので、今後何らかの形で構成を変えるかもしれません。追記:あまりに冗長なのが気になったので、上記対応しました。利用で変更可能ですが、デフォルトでは以下のような設定となっています。先程は全てのブレイクポイントに応じてクラス指定が必須、と書きましたが全て同じカラム数が同一の場合はショートハンド指定が可能です。</div></div>均等配置カラムの数に応じたサイズに自動で調整させます。</div></div>他にも整列位置の調整や、並び順の設定が可能です。詳しくはデモを参照ください。使ってオプションを変更した状態で使用することができます。必須プラグインビルドには以下のプラグインが必須です。らへんを使うことで大体揃うような基本的なものだけで動くようにしています。postcss-importpostcss-custom-propertiespostcss-calcpostcss-custom-media推奨プラグイン必須ではありませんが、ブラウザサポートの観点から以下のプラグインを追加することをおすすめします。postcss-flexbugs-fixesautoprefixer設定値を上書き基本的な流れは次のようになります。グリッドスタイルを読み込む一部の変数をオーバーライドする例です。*/変数の詳細は以下のソースコードを参照してください。冒頭で書いた「ブレイクポイントでカラム間余白を調整したい」といった要望が、どの程度一般的にあるかは分かりませんが、少なくとも僕はやりたいと思うことが多いため作りました。同じような考えを持っている方は是非使ってみてフィードバックいただけると嬉しいです。いただければと思います。迷ってる発言した際に助言をくれた、@ktsnさん、@wreulickeさんに感謝です。wadackel.me。