おはようございます。 これまで、ページのマークアップの作成はほぼ自動化されていません。
float
または
inline-block
（ more ）を使用してマークアップを実行します。 だから、私はあなたといくつかの素晴らしいアイデアを共有したいと思います-Justify Grid Framefork。
問題
float
レイアウトについて話すと、要素を中央に配置するという問題に直面し、幅とインデントのすべての値を慎重に示す必要があります。 この問題は、既存のグリッドフレームワーク（ 960.gsなど ）によって確実に解決されます。 しかし、マークアップは対称的に正しくなく、開発者は常に.clearfixを使用する必要があることがわかりました。 さらに、分数ピクセルのために問題が発生する可能性があります。
inline-block
について説明すると、この値を持つ要素は上端ではなくベースラインに配置されるため、不便が生じます。 また、ページに複数のインラインブロックがあり、それぞれが新しい行にある場合、それらの間にいくつかのギャップがあります。 スペースはレイアウトに影響します。 ソリューションがあります-CSS Grid LayoutまたはFlexible Box Layoutですが、これらのソリューションはほとんどのブラウザーでサポートされていません。
グリッドを揃える
小さな例を挙げましょう。
<div class="main"> <h1>Image Gallery</h1> <div class="image"></div> <div class="image"></div> <div class="image"></div> </div>
.main { text-align: justify; font-size: 0; } .main:after { content: ''; display: inline-block; width: 100%; } h1, .image { text-align: left; font-size: medium; } .image { vertical-align: top; display: inline-block; width: 30.3571%; }
擬似要素のおかげですべてが機能します。after：要素間をインデントするのは彼です。 私はそれがどのように機能するか理解していますが、なぜそれがそのように機能するのか理解していません。 ：afterが要素の後に表示されます...コメントの詳細を確認したいと思います。 。 ブロックの幅とパディングは、次の式を使用してCSSで定義されます。
この式は、1つの美しいSASSファイルを使用して計算されます。
$columns: 12 !default; $column-width: 4em !default; $gutter-width: 2.5em !default; %grid { text-align: justify !important; text-justify: distribute-all-lines; font-size: 0 !important; & > * { text-align: left; font-size: medium; } &:after { content: ''; display: inline-block; width: 100%; } } %grid-cell { vertical-align: top; display: inline-block; width: 100%; } @function grid-span($cols, $total: $columns) { @return ($column-width * $cols + $gutter-width * ($cols - 1)) / ($column-width * $total + $gutter-width * ($total - 1)) * 100%; }
Justify Grid-クロスブラウザ。 さらに、フレームワークでは、.push .pull .append .prependクラスを使用して要素を移動および追加することもできます。 また、プロジェクトサイトには、指定されたパラメーターから必要なCSSのジェネレーターもあります。
プロジェクトページ-http://justifygrid.com/
Github
ご清聴ありがとうございました。