Grid layouts are not complicated

There are lot of frameworks available to help with building grid layout based websites. They all vary in features, complexity and weight but focus on the same thing in the end. Creating a grid layout from scratch is not that complicated if you don’t need any crazy features, you also save a lot of bloat which will help with page load times.

Columns

All grid layouts define a main content area then split that into a number of columns with fixed widths, the content boxes are then as wide as N of these columns. The markup for this is as simple as adding a few class names.

<main>
    <section class="column colspan-7">
        main stuff
    </section>
    <aside class="column colspan-3">
        side stuff
    </aside>
</main>

The <main> element will be the main body of the site and anything with the “column” class will be a column in the grid. We’re using a 10 column wide grid here for simplicity, that makes each column just be 10% wide. The “colspan-*” classes just define how many columns each element takes up, you can use whatever name you like for that.

Now all we need to do is define some widths and we’re all done!

main {
    width: 600px;
    margin: 20px auto;
    background: #eee;
    overflow: auto; /* So the wrapper does not collapse */
}

.column {
    float: left;
}

@for $i from 1 through 10 {
    .colspan-#{$i} { width: $i * 10%; }
}

I’ve used SCSS here to make the column widths a bit easier to define but you can do it just as easily without.

.colspan-1 { width: 10%; }
.colspan-2 { width: 20%; }
.colspan-3 { width: 30%; }
.colspan-4 { width: 40%; }
.colspan-5 { width: 50%; }
.colspan-6 { width: 60%; }
.colspan-7 { width: 70%; }
.colspan-8 { width: 80%; }
.colspan-9 { width: 90%; }
.colspan-10 { width: 100%; }

More complete example

See the Pen Simple grid layout example by Jacek (@betterphp) on CodePen.