asked on

Theoretical Question: Grid System - Design vs. Code

Hi there,

I'm working on a project that uses the 1200px grid structure. Its my first major foray using it, so I wasn't sure how you were supposed to handle this issue:

Do you have to maintain the same number of columns throughout a design for an element?
If I use 4 of 12 col on desktop and 100% width on mobile - does that mean I have to use 4 of 12 col on the tablet? Or could that state change to be 6 of 12 col?

I'm still trying to grasp the basics of responsive design - and how to layout a design that can be realistically translated into code.

Thank you!
Liz

SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

maeve100

ASKER

How is that handled in code?

Ie. In desktop I set up an image to be four col:

  <div class="row">
    <div class="four columns">Four - Image</div>
    <div class="eight columns">Eight</div>
  </div>

Open in new window

In tablet view-ports, I want that same code to work - but now I'm deciding its 6 columns. So wouldn't the code have to change to:

  <div class="row">
    <div class="six columns">Six - Image</div>
    <div class="six columns">Six</div>
  </div>

Open in new window

My understanding is that the HTML itself doesn't change - its just the CSS set up for that view port - so you would have to always define the class as the same, between all viewports. What am I missing here?

ASKER CERTIFIED SOLUTION

Julian Hansen