Susy - CSS Grid

Susy Tutorial – How to create a custom CSS grid without a bloated mess

Have you ever worked on a project with a complex grid system, but including a CSS framework seemed to be unnecessary?

With Susy you can create your own custom CSS grid in seconds without any headaches.

Find out in my latest screencast how to quickly start with Susy.

How to create a custom grid with Susy

Related Susy Demo

Here’s the related CodePen demo, play with the grid settings to get familiar how Susy works.

See the Pen Awesome Custom Grids with Susy by Petr TIchy (@ihatetomatoes) on CodePen.4864

Related Links


What is your favorite tool or framework when it comes to creating CSS grid layouts?

Have you created your own or are you using CSS Foundations or Bootstrap?

Let me know in the comments below.

17 thoughts on “Susy Tutorial – How to create a custom CSS grid without a bloated mess

  1. Tim Jensen

    Thanks for the post Petr. Looks great … I’ve been using the Bourbon mixin library, and there Neat grid library.

  2. Harpreet Singh

    I’m new to responsive design so I use bootstrap, is there better ways to make a site responsive?

    And I remember you saying Petr, that bootstrap is not good to use if you are doing animations, how come?

    Please fill me in.


    1. Petr Tichy Post author

      Hi Harpreet, Bootstrap is fine to use. As you know it includes a lot of styles so I recommend using your own clean CSS for all the elements that you would like to animate.

  3. Ahmed Nadar

    Thanks Peter,
    I have used Bootstrap and Foundation for years. And to tell you the truth I had enough of using them. I felt it lemets me a lot. There for I’m creating my own framework/grid I call it “Tulpe”. Still in the process. It is based Flex Property which I love. I wanted to create something similar to Suzy, but didn’t know how 🙁
    I think I will switch to Suzy and update my Tulpe to have similar idea to Suzy.
    Happy Coding.

  4. alexandra spalato

    I have used susy a lot, but lastly i fell in love with uikit framework :
    i use it with the wordpress beans framework :

  5. kirti

    The website contains 7 vertical sections. Of these, I required to complete the second section only, which is titled ‘BRAND VISION’. This section contains 5 slides.
    Will you help me to code this slides?


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.