CSS Grid Spliter Use nth Type Selector

This Grid8 with 8 col

First

Col 2

2n+1

3n+1

4n+1

5n+1

6n+1

7n+1

This 7 col

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Column 7

This 6 col

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

This 5 col

Column 1

Column 2

Column 3

Column 4

Column 5

This 4 col

Column 1

Column 2

Column 3

Column 4

This 3 col

Column 1

Column 2

Column 3

This 2 col

Column 1

Column 2

This 1 col

Column 1

Every "col" under "Grid" and "Inner" classes will transform on this screen! See more about target device on hypothesis

@ Screen 0-450px

@ Screen 450-599px

@ Screen 599-951px

@ Screen 952px +

Philosofhy

Number of 8 it's mean : 'INVINITY' = like this number with no limited line and always connected that mean can't be break. It's also mean always back from the beginning.
Like this layout also if any more than column or split we hope gonna be unity content. Please use this way for split our elements using nth type selector. I think 8 column or grid more than enough for split any element on hypothesis blogger template. That is live preview for 8 split grid use nth type of

How to apply for another element on hypothesis skin?

• 1. All code well work in class='inner' for Hypothesis and Other
• 2. Auto CSS added in template (stand alone)
• 3. Add DIV what do you want eg: content, sidebar, or footer
• 4. Only add div class='boks' and class='col'
• 5. Background 6 color Flat UI mixed and applied in template
• 6. Truely responsive basic target device on Hypothesis
• 7. Col margin set to 1% and width size calculated by how many column as you want
• 8. Col will transform from 4 col to 3 col to 2 col and 1 col since screen less than 951px, 599px, 450px by default
• 9. For more detail, see this our tutorial : Make box responsive layout use nth-type-of

Copy this code on your HTML :

This 3 col or choose what you want eg: grid6 and more
<div class="boks grid3">
<article class="col orange">
   Column 1 
  </article>
 
  <article class="col red">
   Column 2  
  </article>
 
  <article class="col green">
   Column 3
  </article>
</div>

See more tutorial this grid with nth of type here : http://webdesignerwall.com/tutorials/responsive-column-layouts
For test nth type selector use this : https://coveloping.com/tools/css-nth-child-tester or http://nth-test.com/
To create margin and width size if split columns use this calculator : http://www.responsivegridsystem.com/calculator/
Ahmad Maryuki July 11, 2015 01.01