3

ゴールデングリッドシステムグリッドを使用してレスポンシブ2列レイアウト（コンテンツとサイドバー）を作成しようとしていますが、理解に問題があります。私はこのシステムの背後にあるアイデア（固定幅、ズーム可能なベースラインなどなし）が本当に好きですが、列の作成方法がわかりません。デスクトップにサイドバーとコンテンツ列を並べて、次にサイドバーを上に、コンテンツをタブレット/モバイルに下に配置したいと思います。どんな助けでも大歓迎です。

4

2 に答える 2

1

Web サイトで提供されている例では、グリッドを使用して列を作成する方法がよくわかりません。

GGS について理解しておくべき最も重要なことは、これはグリッド フレームワークではなく、列幅などを提案するだけだということです。CSS をダウンロードした場合は、これらの提案がコメントにまとめられていることがわかります。

  Four-column grid active
  ----------------------------------------
  Margin   | #  1   2   3   4   |   Margin
  5.55555% | %  25  50  75  100 | 5.55555%



  Eight-column grid active
  ----------------------------------------------------------------------
  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%


  Sixteen-column grid active
  ----------------------------------------------------------------------------------------------------------------------
  Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
  5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%

グリッドを作成するには、ニーズに最適なものを選択する必要があります。8 列のグリッドを選択したとします。最も簡単な方法は、最初の列幅 (12.5%) から作成し、それを後続のグリッド列に追加することです。レスポンシブにするには、適切なブレークポイントに対応するメディア クエリで適切な列定義をラップするだけです。

フィドルの例を参照してください: http://jsfiddle.net/ricebunny/C6QEu/12/

于 2014-06-27T10:08:07.957 に答える
0

指定したページには、ダウンロードできる 4 つのファイルがあります。それらを使用して適応させることをお勧めします。幅を固定せずに 2 列のレイアウトだけを作成したい場合は、2 つの単純な列を使用して独自のレイアウトを作成し、パーセンテージを幅として使用してみませんか?

于 2012-04-29T22:55:53.867 に答える