Making your own Columns using CSS

To make your site responsive you don’t need a fancy front end framework (although they are fantastic to work with). You can create your own dynamic classes that will immediately improve your websites mobile responsiveness.

In our CSS we must specify our column widths. These columns will allow us to specify how many columns we want our code to span. Below we have added 12 columns in our CSS. This means that our content must always add up to 12 columns. If the first column has a class of .col-6, the classes added next must add up to 6 (.col-4 + .col-2, .col-3 + .col-3, etc.)

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

See the Pen BdegmX by waltir. (@waltir) on CodePen.dark

See the Pen Making your own Columns – CSS by waltir. (@waltir) on CodePen.dark

0