This is a set of simple CSS preprocessor mixins meant to provide a basic grid for your websites. https://ajy.co/the-simplest-sass-flexbox-grid-ever
See a demo and play with it:
This repo provides a mixin called _fg(). You can use this mixin on a grid container. It will distribute the child elements of that container into a grid layout as specified in the mixin.
The mixin accepts three arguments:
- Number of columns OR layout
- Width of gutter between grid columns
- Amount of padding in grid columns
You are able to do some interesting stuff, e.g.:
- Set an arbitrary number of columns in your container. The columns will be of equal width by default.
- Set a custom layout (e.g., three columns of 1x, 3x, and 2x width) in your container
- Override width (or other properties) of a particular column as needed
- Columns will wrap in a container. For example, if you specify a three column layout but provide six columns in the markup, you'll get a second row of columns using the correct layout.
Choose Sass (scss) or Stylus below to view detailed usage instructions:
After cloning this repository, you'll find the relevant sass or stylus files in their respective directories.
- Roland Toth augmented the original mixin to accept a layout; taught me a couple cool SCSS tricks I wasn't aware of
- Jayesh Saraf supplied a breakpoint mixin
- Narkoleptika provided the Stylus port