Skip to content

Software Engineer at Polygon

Do you really need another grid system?

Every single day I come across new grid systems. They all do the same job. Some of them are terribly ugly and difficult to use, some of them are fantastic and so powerful. Let me point what needs to be possible in good grid system:

  • easy to use
  • using own markup
  • nest grids
  • reorder columns

One of the most important things for me is to use my own markup. I don’t want to use extra classes to describe my layout. It can be ugly and makes my markup so cluttered! Why do I have to use something like this:

<div class="post column small-6 medium-4 large-3 x-large-2">
  post
</div>

If I need just:

<div class="post">
  post
</div>

Sometimes we need to nest grids. Lets say we have a two columns and inside one of them we need well aligned gallery. Thats the case when grid nesting comes handy.

Nestes grids

It is definitely not the best technique to place the most important content somewhere close to end of our html document. From SEO reasons is better to keep important things as close as possible. Correct me please if I’m wrong. What should we do if we have a sidebar on left hand side and main content div on right side? There is so many tricks to reorder content and we need to be able to do it as well. It’s not important only from SEO point of view. Having a better control and changing the order dependable of viewport is a main thing.

Reordered columns inside grid system

Rows and columns #

Thats it! Every single grid system creates some rows and columns. Row wraps things together and column sets specific width to en element. With this information in mind lets have a look at bits of code below.

.wrapper {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.wrapper:before, .wrapper:after {
  content: '';
  display: table;
}
.wrapper:after {
  clear: both;
}

Thats the way how we create element that wraps columns together and keeps everything centered. We can adjust maximum width of that element and use any absolute or relative units to set maximum width up. Because we are going to use floating elements inside that div, clearfix is necessary here. Lets have a look at second puzzle.

.column {
  float: left;
  width: 50%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

Columns are straight forward. Floating of that element allows us to place columns next to each other. Padding on left and right hand side gives us a gutter between columns. Thing that we can customise here is width and gutter. Percentage based width value is best option to create fluid layouts. I like to have all my gutters equal, thats why I use paddings to create a gutters between columns.

Grid system via two SASS mixins #

We know already the general idea behind every grid system. Lets convert our CSS snippets into SASS mixins.

/* Variables */
$wrapper: 80rem;
$gutter: 1rem;

/* Row */
@mixin row($inside: false) {
  @if($inside == true) {
    margin-left: -$gutter/2;
    margin-right: -$gutter/2;
  }
  @else {
    width: 100%;
    max-width: $wrapper;
    margin-left: auto;
    margin-right: auto;
  }
  &:before, &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}
/* Column */
@mixin col($width: 1, $padding: true) {
  float: left;
  width: percentage($width);
  @if($padding == true) {
    padding-left: $gutter/2;
    padding-right: $gutter/2;
  }
}

BOOM! Just two variables and two SASS mixins gives us a powerful tool to build grid based layouts. Instead of explaining how to use it, have a look at straight forward examples below. Have a look at the styles of each example to find helpful descriptions.

Easy blog layout #

Standard blog layout with content area and sidebar. That is very easy one.

See the Pen Do you really need another grid system? - Easy blog layout by Pawel Grzybek (@pawelgrzybek) on CodePen.

First part of creating this layout is similar to example above. It’s more interesting with second grid that is nested inside on of the columns. Addition mixin argument (inside) used for nested gallery is necessary to reset extra padding.

See the Pen 2015.05.09 - 2 by Pawel Grzybek (@pawelgrzybek) on CodePen.

Reordered columns inside the SASS grid system #

To reorder columns, we need to add two very easy and straight forward mixins. Have a look at the bit of code below. Easy like that!

@mixin push($width: 0) {
  position: relative;
  left: percentage($width);
}
@mixin pull($width: 0) {
  position: relative;
  right: percentage($width);
}

See the Pen 2015.05.09 - 3 by Pawel Grzybek (@pawelgrzybek) on CodePen.

Do you really need another grid system? #

No, you don’t. By the way - use flexbox instead!

Comments

  • L
    Luk

    This is a really great solution! Thanks for putting it up!

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      I'm glad you found it useful. I just like to keep things simple :)

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
  • A
    Abhijit

    Nice and clean solution! Can you give me some hints to make this grid responsive?

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Yeah my friend. Thats dead easy. I created that CodePen for you. You just need to pass a mixin with a different argument in a media queries. It is that easy :)

      http://codepen.io/pawelgrzy...

      Is it helpful enough?

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • a
        abi

        Thank you! You're great! :)

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
        • Pawel Grzybek
          Pawel Grzybek

          You are welcome.

          👆 you can use Markdown here

          Your comment is awaiting moderation. Thanks!
          • j
            joe dyer

            Hey Pawel. Nice grid - very simple to use!

            I wondered if you had any advice on how to stop the code bloat when passing in the 'col' mixin when using media queries, as it duplicates code? :)

            👆 you can use Markdown here

            Your comment is awaiting moderation. Thanks!
            • Pawel Grzybek
              Pawel Grzybek

              Thanks a lot.

              A yeah, there is a many ways how you can combine media queries together. The easiest way is to use gulp plugin https://www.npmjs.com/packa... or grunt one https://github.com/building....

              Hopefully that helped.
              Im glad you enjoyed my grid solution.

              👆 you can use Markdown here

              Your comment is awaiting moderation. Thanks!
  • L
    Littledevil

    Thanks for putting it up. It's really neat. Using it in production right now. Works great!

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      I'm happy to hear that you found it useful.

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
  • A
    Andrea Ballerino

    Hi Pawel,
    If I’ve 3 breakpoint and include - @include col - three time, the final CSS repeat:

    .my-div {
    float: left;
    ...
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    }

    I don’t think is the best way on a large site. There is a way to resolve this problem?

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      It is not end of the world but you are right it isn't perfect. As long a gziping on the server is enabled, it catches all repeatable patterns and doesn't harm performance that much. You can read more about it on Harry Roberts article that he published some time ago...

      http://csswizardry.com/2016...

      Feature that you expected may be challenging to create in Sass, but it seems to be a perfect candidate to write in PostCSS. Thank you Andrea for feedback and great idea for future improvement!

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • A
        Andrea Ballerino

        Thank you Pawel for your helpful reply :)

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
  • a
    aurelian

    So, how do I make a grid system with Sass but foundation like grid system, with BEM?

    Since I have a Sass markup that is 100% on the mobile, but then whatever grid__col--4 that will be 1/3 tablet + size, but i want that to be 1/2, and how do i do that? this is 100% on mobile, but i cna't skale it to be 50% on tablet and 33% on desktop the way you showed, or even may way. Or im just too ignorant, but im new.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!