2

どの CSS グリッド システムが迅速に機能し、それなしでは実行できませんか?

私はさまざまなリソースからフリーランスのプロジェクトに取り組んでおり、取得した Photoshop ファイル (PSD) はグリッドに基づいていないか、同じグリッド幅と列、ガターを使用していません。私はデザイナーと直接コミュニケーションを取っているわけではありません。クライアントまたは他のフリーランサー/下請け業者から直接デザインファイルを入手するだけです. PSD 用の HTML CSS を Grid を使わずに IE 互換で作成するのが得意です。

最近では、幅 940px のグリッドやその他のボタンや jquery プラグインに基づく Twitter ブートストラップがコミュニティで人気を博しています。

私の質問は、特にグリッドの使用に関するものです。通常の方法と比較して、何も制限することなく開発時間を短縮できる方法、特にデザイナーが離れた場所にいて、私がデザイナーに直接接続していない場合、グリッドベースのシステムを強制的に使用することさえできない. 一部のクライアントから twitter ブートストラップを使用するように依頼されていますが、提供されたデザイン ファイルが 940px グリッドと一致しません。

4

1 に答える 1

3

実装しているデザインがレイアウトグリッドに基づいていない場合、CSSグリッドシステムはまったく役に立ちません。

ここではおそらくデザインの知識が不足していることを示しますが、レイアウトグリッドでは、レイアウト列の最小幅（60pxなど）と側溝（列間の水平方向のスペース）の幅（20pxなど）が指定されていると理解しています。大きな柱は、最小の柱幅と側溝の倍数で構成されます。たとえば、4スパンの柱は、4つの個別のレイアウト柱と3つの側溝の幅になります。

これは、列の数が異なるレイアウトを互いに一貫性のあるものに見せるための方法です。

CSSグリッドシステムはこれをCSSに実装しているため、CSSを作成する必要はありません。

HTML要素にクラスを適用するだけです。Twitter BootstrapのCSSグリッドシステムの場合、4スパン列と8スパン列を隣り合わせにするには、次のHTMLを使用します。

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

次に、<div>sは適切な幅とガター、およびfloat関連するコードの適切な組み合わせを取得して、列として配置されるようにします。したがって、個々の列のレイアウトCSSを作成（およびさまざまなブラウザーでデバッグ）する必要がないため、時間を節約できます。

ただし、実装しているデザインがレイアウトグリッドを使用していない場合、レイアウトグリッドを実装していないため、CSSグリッドシステムはまったく役に立ちません。

于 2012-02-01T11:21:31.140 に答える