Title: Understanding the grid
Last modified: January 13, 2018

---

# Understanding the grid

 *  Resolved [sanla](https://wordpress.org/support/users/sanla/)
 * (@sanla)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/understanding-the-grid/)
 * Anthony,
 * Below I have 3 questions (5-7) and four assumptions (1 – 4). They raised when
   examining the working of the grid and my purpose to extend / change it (but keep
   it basic and keep it float based).
    Can you tell me if my assumptions are correct
   and answer the related questions?
 * Thank you!
 * Here we go:
 * 1) Assumption:
    The classes site-content, site-footer, site-header, home-sidebar
   and banner act as a “container” for the grid and one of it’s purposes is to center
   the grid (by setting margin: 0 auto; max-width and width).
 * 2) Assumption:
    The classes with the name ‘container’ in it – headercontainer,
   bannercontainer, maincontentcontainer, footercontainer – are for the general 
   layout.
 * 3) Assumption:
    The combination of these settings:
 * “grid container classes” (see 1) -> margin: 0 auto;
    col class -> left-margin
   in percentage. row class -> margin: 0 auto;
 * structure the grid by making the content not touch the edges of the viewport 
   and create gutters and is another implementation of the same but with settings
   like for example:
 * An equal sided padding (value X) on the “grid container” with
    a negative margin-
   left (value X) on the row class and equal sided padding (value X) on the col 
   class grid to negate the container’s padding and create the gutters.
 * 4) Assumption:
    If replacing the grid (stylesheet grid.css) of the theme, the
   new grid may have a container and this does not interfere with the existing “
   grid container” classes (see 1). At most, it is kind of duplication on containing
   of the grid.
 * 5) Question:
    If replacing the grid, with a grid system that has an equal sided
   padding on the “grid container” and taking in account the theme structure, what
   is the best choice for row margin and column padding, pixel or percentage?
 * 6) Question:
    The classes site-footer, home-sidebar and banner do not have setting‘
   position: relative;’. Why not?
 * 7) Question:
    The classes home-sidebar and banner do not have setting ‘clear:
   both;’. Why not?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/)
 * (@ahortin)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/understanding-the-grid/#post-9980147)
 * 1. Correct!
 * 2. Pretty much, yep. They’re mainly used for identifying different sections of
   the site (eg. Banner, footer etc.)
 * 3. There’s no negative margins used on rows.
 * As mentioned in #1. classes like `site-content` & `site-footer` control the width
   of the main content area by specifying the `width`, `max-wdith` and auto margins.
 * Classes like `col grid_8_of_12` or `col grid_4_of_12` control how many columns
   are used in each row. There’s a max of 12 columns per row.
 * 4. If you want to replace the grid, as well as including a different stylesheet,
   you’ll need to change all the classes that specify row and columns, in almost
   every php file. You’ll need to look at the grid that you want to use to work 
   out which classes you need to change, add or remove.
 * 5. There’s no ‘best choice’. It’s really just up to whatever you prefer.
 * 6. No particular reason. They obviously don’t specifically need it.
 * 7. `banner` doesn’t have `clear: both` because that div is also using the `row`
   class, which does have it. Same goes for `home-sidebar`.
 * If you specifically want to use a theme that that has a grid with equal padding
   on either side of the columns, have a look at the new theme I recently released,
   Ephemeris. – [https://wordpress.org/themes/ephemeris/](https://wordpress.org/themes/ephemeris/)
 * You can view a demo of it here – [http://demo.skyrocketthemes.com/ephemeris/](http://demo.skyrocketthemes.com/ephemeris/)
 * And if you want more details on the grid that it’s using, you can find that here–
   [https://unsemantic.com/](https://unsemantic.com/)
 *  Thread Starter [sanla](https://wordpress.org/support/users/sanla/)
 * (@sanla)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/understanding-the-grid/#post-9998952)
 * Hi Anthony,
 * Thank you for your answers! I appreciate it a lot!
 * You can read my comments below and I have a few follow up questions (I really
   hope it’s still doable to read, not to cluttering, with the original questions
   in the top.)
 * 1. Ok, nice.
    2. Ah, ok. I understand. Also, now I see that the terminology I
   used (“general layout”) makes a (little) difference. Good to know!
 * 3. (NOTICE THE 2 FOLLOW UP QUESTIONS)
    Now I see my question is not so clear;
   It’s a 3-in-1-questions about the 3 ‘parts’ of the grid: indeed, the ‘main area’
   as wel as rows as columns. Yes, I understand there’s no negative margins used.
   I mentioned the negative margins as an example to compare your implementation
   and to get confirmed your implementation is ‘just another way’ of implementing
   the grid. And I think this is indeed what you say in your answer; Do I understand
   this correct? And now I understand your implementation is less complicated júst
   because of not using margins or paddings on rows and columns; Do I understand
   this correct?
 * 4. (NOTICE THE FOLLOW UP QUESTION)
    I understand the consequence of having to
   change all the classes that specify row and columns. But may I ask again about
   the “container classes” (site-content, site-footer, site-header, home-sidebar
   and banner): Is it ok to keep them and eventually also add another container 
   if another grid uses one? (NB: Just for the sake of clarity for the reader: the
   term “container classes” is just one I came up with just for use in my question,
   it’s nót from the code.)
 * 5. Ok!
 * 6. (NOTICE THE FOLLOW UP QUESTION)
    Ok. Do you have an example, for one of them,
   when ‘position: relative;’ is needed?
 * 7. Clear!
 * Oh my…! Thank you so much for mentioning your new theme, Ephemeris. I did not
   know of it’s existence because after a lóng, thoroughly search for a theme I 
   wanted to stick to Quark en “nèver” look at that big WordPress theme database
   again… And now… you give me a hard time!… 😉
    This is really, again, a great 
   starter theme you made! Above all, because of the consistently in coding you 
   used. I had a quick look on the grid. I’m only familiar with the unsemantic grid
   from reading about it before; Gonna re-read… Also, I compared the themes some
   more and I see the differences – like for example the use of microdata and the
   changes in the folder/file structuring (N.b. there is no front-page template 
   anymore but I quess this is not a problem, one can always be added ).
 * Thanks again!
    Sandra
 *  Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/)
 * (@ahortin)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/understanding-the-grid/#post-10001351)
 * 3. There’s lots of different ways to implement a grid layout. I like the grid
   in Quark purely because it’s very lightweight, and easy to use and understand.
 * Some grids (e.g. Bootstrap) use negative margins, which I really don’t like. 
   There’s lots of other grids though, that don’t, such as the Unsemantic grid I’m
   using for my new theme. The reason I chose this grid for my new theme is because
   it’s a little more flexible and allows for some better layout options.
 * As to which one is best? It’s entirely up to you. It’s like asking someone, which
   car is best. Everyone has their own opinion.
 * 4. If you remove classes like `site-content` or `site-footer` you’re going to
   pretty much break everything. For example, both of those classes specify the 
   width and max-width of the main content area, along with centering the main content
   area by setting the margins.
 * If you want to know if you can remove a class or not, you really need to use 
   some of the browser developer tools or look through the stylesheet to see what
   styles they’re setting.
 * 6. Here’s an explanation of `position:relative` and related styles
    [https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
 * I hope all this helps.
 *  Thread Starter [sanla](https://wordpress.org/support/users/sanla/)
 * (@sanla)
 * [8 years ago](https://wordpress.org/support/topic/understanding-the-grid/#post-10209360)
 * Hi Anthony,
 * Again, late, so sorry! Although I used your information immediately. Then got
   in a flow… Still working on my website, also with this information 😉
    And, yes,
   it all helpes/helped!
 * I new questions come up related to youre answers here , I’ll let it know.
 * Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Understanding the grid’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/quark/1.4.1/screenshot.png)
 * Quark
 * [Support Threads](https://wordpress.org/support/theme/quark/)
 * [Active Topics](https://wordpress.org/support/theme/quark/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/quark/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/quark/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [sanla](https://wordpress.org/support/users/sanla/)
 * Last activity: [8 years ago](https://wordpress.org/support/topic/understanding-the-grid/#post-10209360)
 * Status: resolved