Awesome
SUIT CSS components-grid
A CSS grid component. The grid makes use of flexbox
and box-sizing
to
provide features that float-based layouts cannot.
N.B. This component relies on particular dimensions being applied to cells in the grid via other classes. For example, suitcss-utils-size.
Read more about SUIT CSS.
Installation
Features
- Fluid layout.
- Intelligent cell wrapping.
- Evenly fill cell spacing
- Equal height columns
- Horizontal centering of cells.
- Custom vertical alignment of cells (top, bottom, or middle).
- Cell width is controlled independently of grid gutter.
- Infinite nesting.
Available classes
Grid
: core componentGrid--alignCenter
: center-align all child cellsGrid--alignRight
: right-align all child cellsGrid--alignMiddle
: middle-align all child cellsGrid--alignBottom
: bottom-align all child cellsGrid--fill
: evenly distribute space amongst all child cellsGrid--fit
: fit cells to their contentGrid--equalHeight
: all child cells match height of the tallestGrid--withGutter
: adds a gutter between cells
Configurable variables
--Grid-gutterSize
: the width of the gutter applied by theGrid--withGutter
modifier class.
Use
A simple grid is easy to create. A grid container can have any number of child
cells. When used with Grid--fill
space is evenly distributed without need for
sizing utilities.
Note Elements that are direct descendants of Grid
will be flex items. It's
recommended to use an element that can easily have classes attached later if
needed, such as u-sizeFill
or u-flexJustifyCenter
<div class="Grid Grid--fill Grid--withGutter">
<div><!-- cell content --></div>
<div><!-- cell content --></div>
<div><!-- cell content --></div>
<div><!-- cell content --></div>
</div>
For more granular control over layout make use of modifiers and sizing utilities.
<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fill|Grid--fit|Grid--equalHeight]">
<div class="u-size1of2 u-lg-size6of12"></div>
<div class="u-size1of2 u-lg-size4of12"></div>
<div class="u-size1of3 u-lg-size2of12"></div>
<div class="u-size1of3"></div>
</div>
Fit cells to their content and allow others to fill the remaining space.
<div class="Grid">
<div class="u-sizeFit">Fit to content</div>
<div class="u-sizeFill">Take up remaining space</div>
</div>
Widths and offsets
Cell widths and offsets can be controlled using the responsive sizing utilities and responsive offset utilities, respectively.
One limitation of creating grid gutters in the manner shown above is that it
prevents any offset utilities applied directly to the Grid
component from
functioning as expected.
GOOD:
<div class="Grid Grid--withGutter">
<div class="u-size1of2 u-before1of4 u-after1of4">
{{>partial}}
</div>
</div>
BAD:
<div class="Grid Grid--withGutter u-before1of4 u-after1of4">
<div>
{{>partial}}
</div>
</div>
You can nest grids in any context, including one that uses dimension or offset utilities, but keep in mind that the dimensions will be relative to the grid's width, and not the width of the whole application.
<div class="u-before1of4 u-after1of4">
<div class="Grid Grid--withGutter">
<div class="u-size1of2"> <!-- 50% of the width of the Grid -->
{{>partial}}
</div>
</div>
</div>
Testing
Install Node (comes with npm).
npm install
To generate a build:
npm run build
To lint code with postcss-bem-linter and stylelint
npm run lint
To generate the testing build:
npm run build-test
To watch the files for making changes to test:
npm run watch
Basic visual tests are in test/index.html
.
Browser support
- Google Chrome (latest)
- Opera (latest)
- Firefox (latest)
- Safari 6.2+
- Internet Explorer 10+
- iOS 7+
- Android 4.4+
- Windows Phone 8.1+