Main Content

I know, I know another Grid system, but bear with me, this one is pretty cool and we have been using it on all our large scale projects at Beyond for the last few years and thought it was time to share.

Currently this only works with Sass, but a PostCSS version is nearing completion, will share once it’s ready. Here’s an example of the code used to create a simple 12 column layout:

SCSS

This defines the CSS to style the grid.

@include rg-create-grid(
    $grid-class: "grid-fullwidth",
    $width: 1280px,
    $gutter: 20px,
    $margin: 24px,
    $columns: 12,
    $breakpoint: "tablet"
);

HTML

This creates the grid structure.

<div class="grid-fullwidth">
    <div class="col-1-1">1 of 1</div>
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-8-12">8 of 12</div>
    <div class="col-4-12">4 of 12</div>
    <div class="col-9-12">9 of 12</div>
    <div class="col-3-12">3 of 12</div>
</div>

And this code will give you the following:

Responsive Grids - 12 column example

This is just a small taste of what it can do, there are loads more options and configuration settings to play around with, so be sure to check it out and click the link below.

Learn more about Responsive Grids

Sub Footer

About

Quirksmode is a fully responsive Universal React Application connected to a Headless CMS designed and developed by myself, web enthusiast and all round nice guy Dave. It was created to be my Portfolio and voice to the world.

All code has been hand written from scratch using Visual Studio. All of the opinions on this site are my own and do not represent those of my employer or colleagues.

+read more

Latest Tweets

+follow quirksmode_uk

Instagram

Contact

David Plunkett

Mobile Number: 07870257474

Email: david@quirksmode.co.uk

+make contact