Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suitcss/components-grid
Component CSS for grids
https://github.com/suitcss/components-grid
component-css components-grid css grid
Last synced: 1 day ago
JSON representation
Component CSS for grids
- Host: GitHub
- URL: https://github.com/suitcss/components-grid
- Owner: suitcss
- License: mit
- Created: 2013-01-23T03:46:41.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T23:55:03.000Z (almost 2 years ago)
- Last Synced: 2024-12-29T20:15:18.330Z (8 days ago)
- Topics: component-css, components-grid, css, grid
- Language: HTML
- Homepage: http://suitcss.github.io/components-grid/test/
- Size: 297 KB
- Stars: 157
- Watchers: 20
- Forks: 30
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SUIT CSS components-grid
[](https://travis-ci.org/suitcss/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](https://github.com/suitcss/utils-size/).
Read more about [SUIT CSS](https://github.com/suitcss/suit/).
## Installation
* [npm](https://www.npmjs.org/package/suitcss-components-grid): `npm install suitcss-components-grid`
* Download: [zip](https://github.com/suitcss/components-grid/releases/latest)
## 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 component
* `Grid--alignCenter`: center-align all child cells
* `Grid--alignRight`: right-align all child cells
* `Grid--alignMiddle`: middle-align all child cells
* `Grid--alignBottom`: bottom-align all child cells
* `Grid--fill`: evenly distribute space amongst all child cells
* `Grid--fit`: fit cells to their content
* `Grid--equalHeight`: all child cells match height of the tallest
* `Grid--withGutter`: adds a gutter between cells
## Configurable variables
* `--Grid-gutterSize`: the width of the gutter applied by the `Grid--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`
```html
```
For more granular control over layout make use of modifiers and sizing utilities.
```html
```
Fit cells to their content and allow others to fill the remaining space.
```html
Fit to content
Take up remaining space
```
### Widths and offsets
Cell widths and offsets can be controlled using the [responsive sizing
utilities](https://github.com/suitcss/utils-size) and [responsive offset
utilities](https://github.com/suitcss/utils-offset), 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:
```html
{{>partial}}
```
BAD:
```html
{{>partial}}
```
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.
```html
{{>partial}}
```
## Testing
Install [Node](http://nodejs.org) (comes with npm).
```
npm install
```
To generate a build:
```
npm run build
```
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
```
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+
Refer to the [caniuse](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox)