attr-grid
attr-grid is a super simple, unobtrusive, responsive grid.
This is only a grid - no css resets, defaults, or extras. Hopefully this makes it easy to use (and easy to comprehend/modify for your projects). attr-grid uses attributes rather than the class based css rules that are normally used in other grid systems.
Why?
A while back I was looking for a simple "grid-only" stylesheet for a couple of projects I was working on. I didn't need the extras that typically come with other grids. I just needed something simple, like this!
I ended up building a simple grid and, after working with Angular Material's grid system, was inspired by the use of attributes to achieve responsive grid control to build attr-grid.
So in short, attr-grid is an attribute based adaption of my original grid system.
Grid system defaults
12 column grid system.
Columns are spaced with a 10px gutter.
Breakpoints are:
- sm: 600px
- md: 960px
- lg: 1280px
Build
Install npm dev dependencies.
npm install
Build the stylesheet.
npm run build
Installation
Link stylesheet
Add the following to your HTML's <head> section:
Viewport scales
Add the following to your HTML's <head> section:
This meta tag ensures mobile and tablet resize page content to match the devices actual viewport width.
Usage
Fluid grid
Use the row attribute on element to define a grid row. Add a col attribute to specify the column's width under that row:
eight column four column twelve column Fixed grid
Use the fixed attribute on element wrapping the grid to achieve a center fixed grid:
eight column four column six column six column Nested grids
Nested grids are supported:
3 column in 6 column 6 column in 6 column 3 column in 6 column 3 column in 6 column/div> 3 column in 6 column Grid utilities
Maybe you need full width blocks, at certian breakpoints? No worries! Here's how:
eight column, full width on md breakpoint four column, full width on md breakpoint six column, full width on sm breakpoint six column, full width on sm breakpoint