How to Create Simple CSS Grid system

Monday 20th, Jun, 2022 | # # # #

A fully functional grid system without all the extra bloatware, oh wait did I also mention its only 565bytes!

Frameworks like Bootstrap and Foundation are amazing and they make our lives a lot better but they often come with things that we don't necessarily need or use. That makes the website load code that is not being used thus making it slower. This css grid is a full grid system that you can use in your project and it won't really make it any slower since its only 565bytes, also yes Bootstrap's grid system is more advanced but this css grid is just what you need and nothing else

grid.css code

.row:after {
  display: table;
  content: " ";
  clear: both;
}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  float: left;
}

.col1 {
  width: 8.333333333333334%;
}

.col2 {
  width: 16.666666666666668%;
}

.col3 {
  width: 25%;
}

.col4 {
  width: 33.333333333333336%;
}

.col5 {
  width: 41.66666666666667%;
}

.col6 {
  width: 50%;
}

.col7 {
  width: 58.333333333333336%;
}

.col8 {
  width: 66.66666666666667%;
}

.col9 {
  width: 75%;
}

.col10 {
  width: 83.33333333333334%;
}

.col11 {
  width: 91.66666666666667%;
}

.col12 {
  width: 100%;
}

@media (max-width: 768px) {
  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col6,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 {
    width: 100%;
  }
}

Grid System

The grid system consists of 12 total columns, 12 being the largest and 1 being the smallest

Usage