Make Box Responsive Layout Use Nth of type Selector CSS

Before, Thanks to see this post. This article for split element on hypothesis blogger template. If you not use our template, please do it your self and try in your blog trial! You can see our "INVINITY" box column on CSS Grid Spliter use nth type selector

Why choose nth of type?

Nth of type is an CSS Selector in other pseudo classes. Please remember that nth-of-type more the diference with nth-child. Structural pseudo-class, *:nth-of-type(n) or  *:nth-of-type(n+1) an * is element, the n-th sibling of its type. Accepts keywords 'odd' and 'even', a single number to target one item, a number followed by n eg. (2n) to target every second item, or a number followed by n+ another number eg. (2n+1) to target every second item starting at item 1 (by: css creator). Chris Coyier was explained about nth child and nth of type more kompleks and less code for customize.

Start with nth of type
In hypothesis blogger template i create this section for split any element. So i hope this code work for your responsive blog.
See this layout with 8 column or box layout :

CSS basicly, on above body

/*
 * ---:[ Hypothesis CSS Inner Spliter ]:---
 */
.boks {
 overflow: hidden;
}

/*
COLOR http://hypothesisdemo.blogspot.com/p/css-grid-spliter.html
*/
.boks .red, .boks .orange, .boks .blue, .boks .green, .boks .dark, .boks .white{border:1px solid #d1dbe6;padding:10px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}
.boks .red{background-color:#DD89A1;border-color:rgba(0, 0, 0, 0.07);}
.boks .orange{background-color:#ECA48F;border-color:rgba(0, 0, 0, 0.07);}
.boks .blue{background-color:#90BFF8;border-color:rgba(0, 0, 0, 0.07);}
.boks .green{background-color:#46A28D;border-color:rgba(0, 0, 0, 0.07);}
.boks .dark{background-color:#898989;border-color:rgba(0, 0, 0, 0.07);}
.boks .white{background-color:#eff4ff;border-color:rgba(0, 0, 0, 0.07);}
/*
Layout http://hypothesisdemo.blogspot.com/p/css-grid-spliter.html
*/
.col {
 background: none;
 float: left;
 margin-left: 1%; /* margin for left side you can customize eg:1.6 but col width will change too */
 margin-bottom: 1%; /* margin for bottom side */
}

.fullywidth .col {
 float: none;
 margin-left: 0; /* set if box full width */
}
/* grid8 col */
.grid8 .col {width: 11.62%;}
/* grid7 col */
.grid7 .col {width: 13.42%;}
/* grid6 col */
.grid6 .col {width: 15.83%;}
/* grid5 col */
.grid5 .col {width: 19.2%;}
/* grid4 col */
.grid4 .col {width: 24.25%;}
/* grid3 col */
.grid3 .col {width: 32.66%;}
/* grid2 col */
.grid2 .col {width: 49.5%;}
/* grid1 col */
.grid1 .col {width: 100%;}
/* clear col */
.grid8 .col:nth-of-type(8n+1),
.grid7 .col:nth-of-type(7n+1),
.grid6 .col:nth-of-type(6n+1),
.grid5 .col:nth-of-type(5n+1),
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
 margin-left: 0;
 clear: left;
}/* grid1 is full width but in nth-of-type will wrong code so we can igore it */

Invoking Box to Rock
If media screen less than 951px

@media all and (max-width:951px){
/* reset cols to 3-column odd*/
/* grid8 */
 .grid8 .col {
 width: 32.66%;
 }
 .grid8 .col:nth-of-type(8n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid8 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }

 /* grid7 */
 .grid7 .col {
 width: 32.66%;
 }
 .grid7 .col:nth-of-type(7n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid7 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
/* grid6 */
 .grid6 .col {
 width: 32.66%;
 }
 .grid6 .col:nth-of-type(6n+1){
  margin-left: 1%;
  clear: none;
 }
 .grid6 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid5 */
 .grid5 .col {
 width: 32.66%;
 }
 .grid5 .col:nth-of-type(5n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid5 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid4 */
 .grid4 .col {
 width: 32.66%;
 }
 .grid4 .col:nth-of-type(4n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid4 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
}

If media screen less than 599px

@media all and (max-width:599px){
/* set cols to 2-column even*/
 /* grid8 */
 .grid8 .col {
  width: 49.5%;
 }
 .grid8 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid8 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid7 */
 .grid7 .col {
  width: 49.5%;
 }
 .grid7 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid7 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 
 /* grid6 */
 .grid6 .col {
  width: 49.5%;
 }
 .grid6 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid6 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid5 */
 .grid5 .col {
  width: 49.5%;
 }
 .grid5 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid5 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid4 */
 .grid4 .col {
  width: 49.5%;
 }
 .grid4 .col:nth-of-type(3n+1){
  margin-left: 1%;
  clear: none;
 }
 .grid4 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }

 /* grid3 */
 .grid3 .col {
  width: 49.5%;
 }
 .grid3 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid3 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
}

If media screen less than 450px

@media all and (max-width:450px){
/* set all grid or col to fullwidth */
 .col {
  width: 100% !important;
  margin-left: 0 !important;
  clear: none !important;
 }
}

HTML For Run Your Box

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>

For Customize This Layout
Comming soon

Ranking: 5

Facebook Twitter Google+ Stumble it LinkedIn