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?
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
