Skip to content

Instantly share code, notes, and snippets.

@Wilto
Last active March 8, 2017 02:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Wilto/8d01e0fd84591eb7ea33 to your computer and use it in GitHub Desktop.
Save Wilto/8d01e0fd84591eb7ea33 to your computer and use it in GitHub Desktop.
.col-ab > * { } // Two columns, 50%-50%
.col-ab_ > * { } // Two columns, 33%-66%
.col-a_b > * { } // Two columns, 66%-33%
.col-abc > * { } // Three columns, 33%-33%-33%
.col-a_bc > * { } // Three columns, 50%-25%-25%
.col-a_b_c > * { } // Three columns, 37.5%-37.5%-25%
@Wilto
Copy link
Author

Wilto commented Aug 26, 2015

yeah okay into it

/* Two col, 50%-50% */
.col-ab > * { 
    clear: both;
}
@media( min-width: 40em ) {
    .col-ab > *,
    .col-ab > *.post {
        clear: none;
        float: left;
        margin: 0;
        width: 50%;
    }
    .col-ab > *:nth-of-type(2n+1),
    .col-ab > *.post:nth-of-type(2n+1) {
        clear: left;
    }
}

/* Two col, 66%-33% */
.col-a_b > * {
    clear: left;
}
@media( min-width: 55em ) {
    .col-a_b > * {
        clear: none;
        float: left;
        margin: 0;
        width: 33%;
    }
    .col-a_b > *:nth-of-type(odd) {
        width: 66%;
        clear: left;
    }
}

/* Two col, 33%-66% */
.col-ab_ > * {
    clear: left;
}
@media( min-width: 55em ) {
    .col-ab_ > * {
        clear: none;
        float: left;
        margin: 0;
        width: 33%;
    }
    .col-ab_ > *:nth-of-type(odd) {
        clear: left;
    }
    .col-ab_ > *:nth-of-type(even) {
        width: 66%;
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment