• Design | Grid System

    Grid references to help to design consistent layouts that I've been use in my projects.

    With this values I've a good precision to position elements correctly and keep the code structure simple, Works fine in resolution from mobile to FullHD.

    Desktop

    • Columns: 12
    • Width: 72~96px
    • gutter: 24~36px

    Tablet

    • Columns: 6
    • Width: 72~96px
    • Gutter: 24~36px

    Mobile

    • Columns: 4(portrait) or 6(landscape)
    • Width: 56~72px
    • Gutter: 24~36px

    Breakpoints

    • Mobile < 576px
    • Tablets <= 720px
    • Large tablets <= 960px
    • Desktop: 960px~1400px