3

I'm trying to do a responsive two column layout (content and sidebar) with the Golden Grid System grid and am having trouble understanding it. I really like the idea behind this system (no fixed-width, zoomable baseline, etc...) but don't know how to do the columns. I would like to have a sidebar and a content columns that are side-by-side on the desktop and then sidebar on top, content below on tablet/mobile. Any help is appreciated.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
roflwaffle
  • 29,590
  • 21
  • 71
  • 94

2 Answers2

1

Creating the columns can be a little tricky when you first look at the GGS, as the example provided on the website gives a poor illustration of how to use the grid to create the columns.

The most important thing to understand about the GGS is that it's not a grid framework, it only makes suggestions of column width and such. If you've downloaded the CSS, you'll see that these suggestions are outlined in the comments.

  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%

To create the grid, you need to choose which one best fit your needs. Say that you've chosen the 8-column grid, the most simple way is to build it from the first column width (12.5%) and add that to the subsequent grid columns. To make it responsive, simply wrap the appropriate column definitions in a media query that corresponds to the appropriate breakpoint.

See fiddle example: http://jsfiddle.net/ricebunny/C6QEu/12/

riceballthief
  • 41
  • 5
0

On the page you provided there are 4 files that you can download. I would suggest using those and adapting them. If you only want to do a 2 column layout without a fixed width, why not create your own layout with 2 simple columns and use a percentage as the width?

Lodder
  • 19,758
  • 10
  • 59
  • 100