12 column grid for layouts

[TimBox]

Hi all.

I'm kind of starting fresh with my website. So reading up it seems recommended that you use a 12 column layout to keep boxes, text etc neat.

My question is what do people use?

I started with lines on a grid layer, then thought transparent block. Now I'm not sure. So my question is what do the experts hear recommend?

BTW as always if you read this, thanks

Tim

[Chris M]

Honestly? I basically wing it. I lay out the rough look I'm after given the clients wishes and photos. I only look at spacing and geometry at the end, after I'm as happy as I'm going to be with the overall look.

I usually do the desktop version first (somewhere between 1080 to 1200 with Stretch To Fit Width). I then make the mobile variant (640).

Going out on a limb and guessing that Acorn uses grids and things Pythagoras would be proud of; he has a mathematical mind. My mind is just marshmallow and tumble weed.

Luke Mumby Music
Lake Bolac Caravan Park
index (auzlink.net.au)
Bryon Williams Author (bryonsbooks.com.au)
Wilson & Wilson Legal (wilsonandwilsonlegal.com.au)

[TimBox]

Hi,

I was winging it then it I could not make it consistent. I will follow your lead on doing the main first then the mobile

This is my route so far

I used this site work out the grid http://gridcalculator.dk to work out my spacings
My settings were Width 1220 Gutter 40 Columns 6 Margin 30

From that I set the grid in Xara to 40pxls

And set up 6 columns at the right spacing and placed them at the back on there own layer that is locked.

It's working well so far.

Tim

[Acorn]

Going out on a limb and guessing that Acorn uses grids and things Pythagoras would be proud of; he has a mathematical mind. My mind is just marshmallow and tumble weed.

I hate clutter.

I always start with the index page.
I create a vertical Guide down the middle.
I add Guide outriggers - 32px in left & 32px back right.
I set a horizontal Guide to be the base of the Menu Bar.

I set a Footer Guide.

I make most of my images and text areas have a push of 4px.

I use rectangles of 2px thickness and never lines as a Xara Line is an image!

Yes, I use maths - powers of 2 where possibly.
Why. Scaling into a Variant then does not end up with fractions.

I then break the mould with images larger or smaller to occasionally break the top to bottom flow.

A grid approach is only really useful for a responsive site and with flex being more prevalent, even this has had its day.

Acorn

[Chris M]

I didn't know what to expect, but that seems rather straight forward for an Acorn response

[Acorn]

I didn't know what to expect, but that seems rather straight forward for an Acorn response

Success, I am starting to make you think!

Acorn

[gcellison]

Hi, TimBox. I always use a column layout. With 12 columns for the desktop variant and with 4 columns for the mobile variant. If I include a tablet variant, it has 8 columns. I try to adjust the gutters and margins in a way that the column widths are identical (or at least close) across variants. It's never an exact science.