https://github.com/crgeary/css-custom-properties-grid
A very simple, configurable, responsive grid with CSS custom properties & flexbox.
https://github.com/crgeary/css-custom-properties-grid
css css-grid custom-properties
Last synced: 2 months ago
JSON representation
A very simple, configurable, responsive grid with CSS custom properties & flexbox.
- Host: GitHub
- URL: https://github.com/crgeary/css-custom-properties-grid
- Owner: crgeary
- Created: 2017-08-18T22:39:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-31T19:05:03.000Z (over 7 years ago)
- Last Synced: 2025-01-08T12:26:17.938Z (4 months ago)
- Topics: css, css-grid, custom-properties
- Language: HTML
- Homepage:
- Size: 2.93 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom Properties Grid
A very simple, configurable, responsive grid with CSS custom properties & flexbox.
* * *
## Features
* Per row gutter sizes (default 20px)
* Per row column counts (default 12 columns)
* Column offsets (default no offset)
* Column spans (default span 1 column)
## CSS
The entire code needed for a working grid is below:
```css
@media screen and (min-width: 767px) {
.row {
--columns: 12;
--gutter: 20px;
display: flex;
flex-wrap: wrap;
margin: 0 calc(var(--gutter) * -.5);
}
.row > .column {
--span: 1;
--offset: 0;
box-sizing: border-box;
padding: 0 calc(var(--gutter) * .5);
width: calc(100% / var(--columns) * var(--span));
margin-left: calc(100% / var(--columns) * var(--offset));
}
}
```
## Usage
* Set row gutter to 10px: `
`
* Set row column count to 5: ``
* Offset column by 2 column widths: ``
* Span a column by 6 column widths: ``
## Support
Modern browsers (excluding Edge) - [http://caniuse.com/#feat=css-variables](http://caniuse.com/#feat=css-variables)
## Examples
A full list of examples can be found on the [demo page](https://css-custom-properties-grid.netlify.com/demo.html)
```html
```
```html
```
```html
```
A full list of examples can be found on the [demo page](https://css-custom-properties-grid.netlify.com/demo.html)