atGrid.css - CSS Grid System with attribute selectors
atGrid is a Flexbox-based CSS Grid System that uses attributes instead of classes.
Examples
Columns with the same width
<div grid> <section column> <p>Auto</p> </section> <section column> <p>Auto</p> </section></div>Columns with a determined width
<div grid> <section column="8"> <p>8</p> </section> <section column="4"> <p>4</p> </section></div>Columns without gutters
<div grid="ng"> <section column="8"> <p>8</p> </section> <section column="4"> <p>4</p> </section></div>Columns with offsets
<div grid> <section column="3"> <p>3</p> </section> <section column="3 +6"> <p>3 +6</p> </section></div>Columns with offsets and without gutters
<div grid="ng"> <section column="5"> <p>5</p> </section> <section column="5 +2"> <p>5 +2</p> </section></div>Nested grids
<div grid> <section column="4"> <p>4</p> </section> <section column="8"> <div grid> <section column="6"> <p>6 > 8</p> </section> <section column="6"> <p>6 > 8</p> </section> </div> </section></div>Nested grids without gutters
<div grid="ng"> <section column="4"> <p>4</p> </section> <section column="8"> <div grid="ng"> <section column="6"> <p>6 > 8</p> </section> <section column="6"> <p>6 > 8</p> </section> </div> </section></div>Installation
$ npm install atgrid.css
Browser Compatibility
Since version 4.0.0, atGrid.css is based on Flexbox, you can see the table of compatibility in the Can I Use site.
HTML Attributes
container
Sets the element as a container, the container element will have a fixed max-width and will be centered on the page.
grid
Sets the element as a grid element. This is a required element, and should be direct parent of the column elements.
column
Sets the element as a column, should always be used inside a grid element. A column can also contain a grid element to nest grids.
Attribute values
Container
The container element doesn't accept any values.
Grid
ng
Will create a grid where the columns doesn't have gutters.
top
Aligns all the columns inside vertically to the top of the grid.
center
Aligns all the columns inside vertically to the center of the grid.
bottom
Aligns all the columns inside vertically to the bottom of the grid.
Column
<width>
The width of the column, by default from 1 to 12.
+<offset>
The offset of the column, by default from 1 to 11.
top
Aligns the column vertically to the top of the grid.
center
Aligns the column vertically to the center of the grid.
bottom
Aligns the column vertically to the bottom of the grid.
Sass configuration
container-width
Default: 1200px
Description: Maximum width of the container element.
gutter
Default: 2em
Description: Space between columns.
num-columns
Default: 12
Description: Number of columns.
prefix
Default: ''
Description: Prefix for the attributes, use data- if you need valid HTML.
breakpoint
Default: 420px
Description: Below this point the columns are expanded to 100%.
License
The MIT License - James Kolce