CODEWITHSUNDEEP
cssresponsive-design
AndyWarren
AndyWarren

Reputation: 2012

Is it necessary to use a column grid for responsive design/development?

I'm a little confused on whether or not a column grid is required for a responsive site. For example, I intend to start with the Bones WordPress theme. I will be using the SCSS setup included in this theme. Its grid is as follows:

.onecol    { width: 5.801104972%;  }
.twocol    { width: 14.364640883%; }  
.threecol  { width: 22.928176794%; }     
.fourcol   { width: 31.491712705%; }       
.fivecol   { width: 40.055248616%; }       
.sixcol    { width: 48.618784527%; }       
.sevencol  { width: 57.182320438000005%; }
.eightcol  { width: 65.74585634900001%; }  
.ninecol   { width: 74.30939226%; }    
.tencol    { width: 82.87292817100001%; }  
.elevencol { width: 91.436464082%; }       
.twelvecol { width: 99.999999993%; }

Am I required to use these classes in order to make this site responsive? What if the site design does not fit these sizes? Please explain CSS grids to me, and how they pertain to a site being responsive.

Upvotes: 1

Views: 613

Answers (1)

Josh Beam
Josh Beam

Reputation: 19772

Responsiveness generally refers to a site looking like you want it to based on the user's screen size (i.e., your site responds to the user.)

There are no "rules" for responsive layouts, so no, your site does not have to follow those column widths. However, there are some design patterns (solutions to frequent problems designers have had in the past, and still continue to have) that are referred to as best practices.

Those percentages you see in the CSS are based on something like this:

If my design area is 980px wide, and my column looks good (based on that size) at 26px in width, then the percentage for that is (26/980)*100 = 2.653%. So, I set the size of my column to 2.653% so that it looks "the same" on all screen sizes.

Here are some good resources for you to look at, regarding responsive design:

Responsive Web Design: What It Is and How to Use It

Beginner's Guide to Responsive Web Design

Responsive Web Design - A List Apart

Examples of flexible layouts with CSS3 media queries

Upvotes: 4

Related Questions