CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム ｜ Tips Note by TAM

中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムを リキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() で相対値と絶対値をかけあわせたサイズを設定するので 画面幅がかわっても、片側は中央揃えのカラムとツラをあわせたまま（端をそろえたまま） もう片側は画面端までのびたサイズをキープできます。 ※IEはpaddingの仕様に落とし穴があったので、最終的にはIEバグ対策のJavaScriptも併用しています。 INDEX よくある中央揃えのレスポンシブなカラム アシンメトリーなカラム まとめ サンプルソース とりあえず実物から見てみたい方は、CodePenのサンプルソースからどうぞ！ See the Pen Asymmetry Column by webdev (@webdev-j

[aTn]

これは良く理解して使わないと、サチコから「コンテンツの幅が画面の幅を超えています」と注意されそう。

[kgcrz2]

“max-width: calc(100% - (50% - (カラム幅 / 2))); width: calc(100% - カラム外側の余白);”