基礎：カスタムグリッド数を使用していますか？

Question

私はバックエンド開発者であり、FoundationとCSSの初心者です。私はフロントエンドの開発者のほとんどが、デザイナーが設計中にグリッド構造を考慮していなければ、デザインをCSSに変換するのに一般的に苦労しているのを見てきました。これは一般的に、12グリッド（デフォルト）の列構造では、要素を必要に応じて正確に配置できる柔軟性がないために発生します。

Foundationは私たちにカスタムグリッド数の使用を提供しているので、それを使用するのが賢明でしょうか？グリッド構造の大部分は、12が良い数であるため12グリッド列を使用します。 12グリッド（樋が20pxと言う）と同じ樋を持つ60グリッドの列構造を使用するとどうなりますか？私はそれが、要素を適所に置くための柔軟性を与えるべきだと考えています。

私を説明しましょう。 3：3：4の比率で私のウェブページに3列の構造が必要で、私はオフセットを残したくないとします。私はどのように12グリッド列を使用してこれを達成することができるか分からないのは、要素を手動で配置することを除いています。しかし、60グリッドの列では、大18、大18、大24、必要に応じてガター、たとえば20ピクセルを使用して簡単に達成できます。

gutterを60グリッドの列構造で20ピクセルとして使用すると、列間の溝がウェブページの大部分を占めるとも言われることがあります。しかし、実際の列を使用するまでは、架空のものは想像以上のものです。したがって、ここでは3つの溝だけが使用され、残りは3：3：4の比率の列になります。

これは、グリッド構造についての私の理解です。もっと知識のある人が私に知らせてもらえますか？もし私が60グリッド構造を使っていれば、私が実際に想像しているものは何か、それとも私が逃している他の点がありますか？

Answer 1

私は間違いなく専門家ではありませんが、私は財団をかなり使いました。 Foundation 6を使用していると仮定します。これらのタスクを達成するには、いくつかの方法があります。両方をプロジェクトで成功させました。

最初の方法は、維持したいと思う数の列に合わせてデフォルトのグリッドを変更することです。個人的には、私が今までに使ったことのあるものは24列のレイアウトです。ほとんどのレイアウトにフィットする柔軟性があります。あなたの_settings.scssでこれを変更します。

$grid-column-count: 24; 

その場合は、一般的に、あなたのために、あなたが定期的にグリッドを使用し、また、カスタムグリッドを作成し、クラスでそれを呼び出すことができる十分な柔軟性ではありません。こうすることで、ほとんどのページで通常の12/24列のグリッドを使用できますが、特殊なケースではカスタムグリッドを呼び出すことができます。 http://foundation.zurb.com/sites/docs/grid.html#grid-row

@include grid-row($columns, $behavior, $width, $cf, $gutter) { } 

最後に、あなたがその特別なもののいずれかを使用したくない場合、あなたはあなたの列に割合を使用して、標準の大＃列クラスを省略することができます。ですから、カスタムSCSS次のようになります。http://foundation.zurb.com/sites/docs/grid.html#columns

.special-column{ 
    @include grid-column(30%); 
} 
.slightly-larger-column{ 
    @include grid-column(40%); 
} 

これはすべてのあなたの質問に答えるが、ちょうどいくつかの混乱は限りベストプラクティスなどがありますように聞こえるかどうかわかりませんか？必要に応じてグリッドを大きくすることができますが、いずれかの方法でそれを維持する必要があります。