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
maeve100Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
No, you don't have to keep the exact same grid across all devices.  Responsive design implies that the grid will shift depending on the amount of space available in the viewport.
0
maeve100Author Commented:
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?
0
Julian HansenCommented:
It depends on the framework you are using. For instance, Bootstrap allows you to do this
<div class="row">
  <div class="col-lg-4 col-md-6 col-xs-6"></div>
  <div class="col-lg-8 col-md-6 col-xs-6"></div>
</div>

Open in new window

Depending on the size of your viewport you either get a 4:8 or 6:6 layout.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
maeve100Author Commented:
Awesome!  I didn't know that's how Booststrap functioned.  Makes sense though :-).

Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.