Basic Grid
The Grid
The grid is a 12-column fluid grid with a max width of 122em, that shrinks with the browser/device at smaller sizes. The max width can be changed by either overwriting the original breakpoints or adjusting the SCSS variables and recompiling. The syntax is simple and it makes coding responsive designs much easier. Go ahead, resize the browser.
Breakpoints
For grids that don't vary in size between wide desktop devices and small handheld devices, use the .-tiny-* classes. Specify a numbered class from 1-12 if you need a particuarly sized column; otherwise, feel free to rely on the auto grid.
If you need more flexibility in adjusting the grid to different screen sizes, use the .-tiny-*, .-small-*, .-medium-*, .-large-* and .-huge-* classes.
| Tiny <48em |
Small ≥48em |
Medium ≥64em |
Large ≥75em |
Huge ≥122em |
|
|---|---|---|---|---|---|
| Max container width | None(auto) | 46em | 62em | 73em | 120em |
| Class prefix | .tiny-* | .small-* | .medium-* | .large-* | .huge-* |
| # of columns | 12 | ||||
| Gutter width | 1em (0.5em on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
To use the breakpoints defined above, make sure to wrap your grid in the .container class, like so:
<div class="container">
<!-- ... Your Grid (rows, columns and everything) ... -->
</div>
Auto grid
The flexbox grid is clever! You can add any number of columns to your rows without defining their width and let the grid figure out the rest.
<div class="row">
<div class="tiny">1 of 2</div>
<div class="tiny">2 of 2</div>
</div>
<div class="row">
<div class="tiny">1 of 3</div>
<div class="tiny">2 of 3</div>
<div class="tiny">3 of 3</div>
</div>
Nesting
Gridder supports nesting out of box. Simply add a new .row inside an existing grid like so:
<div class="row">
<div class="tiny-12 medium-6 large-8">
Grid Column
<div class="row">
<div class="tiny-12 medium-6">Nested Grid Column</div>
<div class="tiny-12 medium-6">Nested Grid Column</div>
</div>
</div>
<div class="tiny-12 medium-6 large-4">Grid Column</div>
</div>
Grid Column
Alignment
Offsets
Offsetting columns is easy! Simply add *-offset-3 if you wish to offset your column 3 columns from the left. The * in this case refers to one of the breakpoints (tiny, small, medium, large and huge). You can naturally chain these to offset differently on the various breakpoints.
<div class="row">
<div class="tiny-6 tiny-offset-3">6 columns</div>
<div class="tiny-3">3 columns</div>
</div>
Start
Gridder allows you to align columns as you see fit. With the class .*-start (where * represents your breakpoint), you can force columns to the start of a row.
This is useful when reordering items on different viewports.
<div class="row tiny-start">
<div class="tiny-8 medium-6">column (forced to start of row)</div>
</div>
End
With .*-end (where * represents your breakpoint) you can force columns to the end of a row. Just like .*-start this is useful when reordering items on different viewports.
<div class="row tiny-end">
<div class="tiny-8 medium-6">column (forced to end of row)</div>
</div>
Center
Gridder also allows you to align columns to the center of a row with .*-center (where * represents your breakpoint). This will align items horizontally.
<div class="row tiny-center">
<div class="tiny-8 medium-6">column (forced to center of row)</div>
</div>
Middle
You can also align items to the middle of a row with .*-middle (where * represents your breakpoint). This will align items vertically.
<div class="row tiny-middle">
<div class="tiny-8 medium-6">column (forced to middle of row)</div>
</div>
Combining .*-center and .*-middle allows you to center items in a row both vertically and horizontally.
<div class="row tiny-center tiny-middle">
<div class="tiny-8 medium-6">column (centered)</div>
</div>
Top
Just like you can force items on the horizontal plane with .*-start and .*-end, you can do so on the vertical plane with .*-top and .bottom-*.
To force items to the top, use .*-top (where * represents your breakpoint).
This is useful when reordering items on different viewports.
<div class="row tiny-top">
<div class="tiny-8 medium-6">column (forced to top of row)</div>
</div>
Bottom
To force items to the bottom, use .*-bottom (where * represents your breakpoint).
This is useful when reordering items on different viewports.
<div class="row tiny-bottom">
<div class="tiny-8 medium-6">column (forced to bottom of row)</div>
</div>
Distribution
Between
Gridder allows for a few ways to dsitribute space, one of witch is to fill space between columns, leaving no space at the start and end of the row. To to this, simply add .*-between (where * represents your breakpoint) to your row element.
<div class="row tiny-between">
<div class="tiny-3">column</div>
<div class="tiny-3">column</div>
<div class="tiny-3">column</div>
</div>
Between
Another way of distributing space, is using the .*-around (where * represents your breakpoint) class, which distributes items evenly across a row, leaving space at the start and end of the row.
<div class="row tiny-around">
<div class="tiny-3">column</div>
<div class="tiny-3">column</div>
<div class="tiny-3">column</div>
</div>
Reordering
Reverse
To reverse the order of columns in row, simply add the class reverse to the row element.
<div class="row reverse">
<div class="tiny-3">1</div>
<div class="tiny-3">2</div>
<div class="tiny-3">3</div>
<div class="tiny-3">4</div>
</div>
Note how the order is reversed:
First
To make a column appear as the first element, simply add .*-first (where * represents your breakpoint) to the column element.
This is very useful for reordering columns on different viewports
<div class="row">
<div class="tiny-3">1</div>
<div class="tiny-3">2</div>
<div class="tiny-3">3</div>
<div class="tiny-3 tiny-first">4</div>
</div>
Note how the order has changed:
Last
To make a column appear as the last element, simply add .*-last (where * represents your breakpoint) to the column element.
This is very useful for reordering columns on different viewports
<div class="row">
<div class="tiny-3 tiny-last">1</div>
<div class="tiny-3">2</div>
<div class="tiny-3">3</div>
<div class="tiny-3">4</div>
</div>
Note how the order has changed:
Masonry
What is it?
A masonry grid is a type of layout commonly used in web design and graphic design. In a masonry grid, elements such as images or text boxes are arranged in a way that creates a visually appealing and balanced composition, resembling the pattern of bricks in a masonry wall.
Unlike a traditional grid layout with evenly spaced rows and columns, a masonry grid allows for more flexibility in the arrangement of elements. Each element is positioned based on its size and the available space, creating a more organic and dynamic layout.
Masonry grids are often used in websites and apps that display a large amount of visual content, such as photography portfolios, online magazines, or e-commerce sites. They are also popular in social media platforms like Pinterest and Instagram, where users can easily browse through a variety of content.
How it works?
The flexbox grid is super flexible and can accommodate many different layouts. You can easily use Gridder to create a masonry grid, simply by replacing the regular .row element with the new .masonry element like so:
<div class="masonry masonry-tiny-1 masonry-small-2 masonry-medium-3 masonry-large-4 masonry-huge-6">
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
<div class="masonry-item">Masonry Item</div>
</div>
Note how you can use the .masonry-X-Y, where X represents the breakpoint and Y the number of colums the masonry grid should span.
Shorthand
Release 2.2.0 introduced shorthand support for the masonry grid. This lets you replace every instance of .masonry with .m.
Here are a few examples:
- .masonry → .m
- .masonry-item → .m-item
- .masonry-tiny-3 → .m-tiny-3
- .masonry-small-7 → .m-small-7
- .masonry-medium-11 → .m-medium-11
- .masonry-large-5 → .m-large-5
- .masonry-huge-8 → .m-huge-8
Examples
A simple masonry grid:
<div class="m m-tiny-1 m-small-2 m-medium-3 m-large-4 m-huge-6">
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
<div class="m-item">Masonry Item</div>
</div>