CODEWITHSUNDEEP
htmlcssgrid-layout
j_s_stack
j_s_stack

Reputation: 665

Layout / Use of Grid System

Hi Im currently creating a Website (who isn't?). My Website Design Looks like this:

Desktop Version: Desktop Version Mobile Version: mobile Version

(Sorry for the Big Images)

As you can see, ist not much changing.

  1. Sidebar and the Global Nav are disabled in the Mobile Version (Menü via o/Off Canvas)

  2. The main Content Layout Changes.

  3. The Layout in the Content divs Changes too. (Use nested Colums fot that in the Grid System?)

My Question is: Should I use a Grid System? If Yes: Should I just use it for the Orange Content Area or for the hole Website?

Added: The Site should is Full with!

Upvotes: 0

Views: 545

Answers (1)

Alex Yanai
Alex Yanai

Reputation: 84

As mmgross said, you're asking a pretty broad question that comes down to taste and experience in design.

There are a number of tools and frameworks that give you access to an already defined grid system; Bootstrap is probably the best known but Foundation CSS is becoming very popular and is lighter weight. If you're not planning to do much intricate styling and just want a preexisting grid, my personal choice is Skeleton - it's very lightweight but adds the grid/responsiveness you're [probably] looking for.

This brings up the other main point: how experienced are you using HTML/CSS? One of the big benefits of using a grid is the responsiveness that comes from them without writing a number of media queries. Still, you'll have to at least write one media query to detect if mobile, so if you're comfortable with position in CSS then it might be best just to pass over grids and write it all yourself (looking at your layout, that's what I'd probably do).

It's always a trade off between time it takes to do the task and time it takes to learn something new, so keep in mind that the learning curve for some of the frameworks might be steeper than you think. Then again, if you're experienced with using them, it will probably be easier to stick with what you know than play around with the raw CSS.

Hope that helped!

Upvotes: 1

Related Questions