私の数学は衝撃的で、できません。私の人生では、この計算を機能させることができません。ユーザーが任意の数のグリッド列 (デフォルトでは 12 個)、これらの列の間のガター、列の周囲の最大幅、およびその合計幅内のマージンを指定できる CSS グリッド システムを作成しています。期待される結果は、各列幅のパーセンテージ幅と、すべての列の左マージンのパーセンテージです。
以下のデフォルトを使用すると、最大幅は 1200px になり、左右の内側の余白は 20 になり、グリッドの最大許容スペースの内側の幅は 1160 になります。それは理にかなっていますか？
ちなみに私が使っているのはSASSです。コード内のコメントを見て、現在機能しているものと機能していないものを確認してください。
jsFiddle のコードは次のとおりです: http://jsfiddle.net/mrmartineau/fMeBk/
$gridColumnCount : 12; // Total column count
$gridGutterWidth : 40; // [in pixels]
$gridColumnPadding : 30; // [in pixels]
$gridMaxWidth : 1200; // [in pixels]
$gridMargin : 20; // [in pixels] Space outside the grid
@function gridColumnWidth() {
@return $gridMaxWidth / $gridColumnCount;
}
// Grid calculations
@function gridColumnWidthCalc($colNumber) {
// Is correct
@if $gridGutterWidth == 0 {
@return percentage($colNumber / $gridColumnCount);
}
// Is incorrect
@else $gridMargin > 0 {
@return percentage( (($colNumber / $gridColumnCount) - gutterCalc(false) ) );
}
}
@mixin columns($columnSpan: 1) {
width: gridColumnWidthCalc($columnSpan);
}
@function gutterCalc($showUnit: true) {
@if $showUnit == true {
@return percentage( $gridGutterWidth / ( $gridMaxWidth - ($gridMargin * 2) ) );
} @else {
@return $gridGutterWidth / ( $gridMaxWidth - ($gridMargin * 2) ) * 100;
}
}
@mixin gridColumn() {
@if $gridGutterWidth > 0 {
margin-left: gutterCalc();
}
@if $gridColumnPadding > 0 {
padding: $gridColumnPadding + px;
}
float: left;
min-height: 30px;
position: relative;
clear: none;
&:first-child {
margin-left: 0;
}
background-color: pink;
border: 1px solid red;
}
@for $i from 1 to $gridColumnCount + 1 {
.span#{$i} { @include columns($i); }
}
.container {
padding-left: $gridMargin + px;
padding-right: $gridMargin + px;
max-width: $gridMaxWidth + px;
}
.col {
@include gridColumn();
}