Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caitken-com/css-grid
A lightweight layout library for building great responsive mobile first UIs that work everywhere. Open Source, built with CSS Grid and Flexbox.
https://github.com/caitken-com/css-grid
css-grid css-grid-layout css-grid-system
Last synced: 6 days ago
JSON representation
A lightweight layout library for building great responsive mobile first UIs that work everywhere. Open Source, built with CSS Grid and Flexbox.
- Host: GitHub
- URL: https://github.com/caitken-com/css-grid
- Owner: caitken-com
- License: mit
- Created: 2024-06-12T02:42:11.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-08-07T07:15:15.000Z (5 months ago)
- Last Synced: 2024-08-07T10:53:12.308Z (5 months ago)
- Topics: css-grid, css-grid-layout, css-grid-system
- Language: CSS
- Homepage:
- Size: 68.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Grid
A lightweight layout library for building great responsive mobile first layouts that work everywhere. Open source, built with CSS Grid and Flexbox.
## Useage
```html
```
## Layout
This library leverages custom html data attributes to help namespace the layout based CSS. The grid can be 12 columns and/or rows.
### Layout: Implicit Columns
Implicit uniform columns can define their values at the parent grid element using `grid-cols-X`. There is no need for wrapper elements around each row, see example below.
```html
2
2
2
2
```
### Explicit Columns
Columns that are not uniform can define their column span value directly on the column element using `cols-X`. Multiple rows are achieved with filling columns according to the 12 column layout.
```html
1
11
2
10
3
9
4
8
```
### Implicit rows
Implicit uniform rows can define their values at the parent grid element using `grid-rows-X`
```html
3
3
3
```
### Explicit rows
Rows that are not uniform can define their row span value directly on the element using `rows-X`
```html
1
4
7
```
## Responsive breakpoints
Breakpoints attributes can be stacked.
| Attribute | Screen size | Device | Behavior |
| --- | --- | --- | --- |
| `cols-1` to `cols-12`
`rows-1` to `rows-12` | Extra small or any | Phones | Always column width.
Always row height. |
| `cols-1-sm` to `cols-12-sm`
`rows-1-sm` to `rows-12-sm` | Small devices (480px) | Phones / Tablets | 100% width to start, column width at breakpoint.
100% height to start, row height at breakpoint. |
| `cols-1-md` to `cols-12-md`
`rows-1-md` to `rows-12-md` | Medium devices (720px) | Tablets / Laptops | 100% width to start, column width at breakpoint.
100% height to start, row height at breakpoint. |
| `cols-1-lg` to `cols-12-lg`
`rows-1-lg` to `rows-12-lg` | Large devices (960px) | Tablets / Laptops | 100% width to start, column width at breakpoint.
100% height to start, row height at breakpoint. |
| `cols-1-xl` to `cols-12-xl`
`rows-1-xl` to `rows-12-xl` | Extra large devices (1440px) | Hi-res Laptop / Desktop | 100% width to start, column width at breakpoint.
100% height to start, row height at breakpoint. |
### Implicit example
```html
2-md 6-lg
2-md 6-lg
2-md 6-lg
2-md 6-lg
2-md 6-lg
2-md 6-lg
```
### Explicit example
```html
3-md 6-lg
3-md 6-lg
3-md 4-lg
3-md 8-lg
```
## Aligning grid elements
- `cols-top`, `cols-top-sm`, `cols-top-md`, `cols-top-lg`, `cols-top-xl`
- `cols-middle`, `cols-middle-sm`, `cols-middle-md`, `cols-middle-lg`, `cols-middle-xl`
- `cols-bottom`, `cols-bottom-sm`, `cols-bottom-md`, `cols-bottom-lg`, `cols-bottom-xl`
### Auto matching heights
Grid columns automatically match column heights.
```html
A
B
C
Ipsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.
```
### Vertically top align columns
```html
A
B
C
Ipsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.
```
### Vertically center columns
```html
A
B
C
Ipsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.
```
### Vertically bottom align columns
```html
A
B
C
Ipsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.
```
## Gap spacing
With special modifiers you can remove gap (gutter) in grid layouts.
- `gap-none`, `gap-none-sm`, `gap-none-md`, `gap-none-lg`, `gap-none-xl`
- `gap-cols-none`, `gap-cols-none-sm`, `gap-cols-none-md`, `gap-cols-none-lg`, `gap-cols-none-xl`
- `gap-rows-none`, `gap-rows-none-sm`, `gap-rows-none-md`, `gap-rows-none-lg`, `gap-rows-none-xl`
```html
A
B
C
D
E
F
A
B
C
D
E
F
A
B
C
D
E
F
```
## Offset grid elements
Offset utilities allows a column to be offset on a given row.
- `cols-offset-X`, `cols-offset-X-sm`, `cols-offset-X-lg`, `cols-offset-X-xl`
- `rows-offset-X`, `rows-offset-X-sm`, `rows-offset-X-lg`, `rows-offset-X-xl`
```html
cols-4
cols-4 cols-offset-9
cols-3-md cols-offset-4-md
cols-3-md cols-offset-10-md
cols-6-md cols-offset-4-md
```
## Nesting grid elements
Grids can be nested within other grids to create more complex layouts.
```html
2-lg
6
6
6
6
6
6
2-lg
2-sm 4-md
2-sm 4-md
2-sm 4-md
2-sm 4-md
```
## Ordering grid elements
Flexbox allows us to reorder columns regardless of the HTML order.
- `first`, `first-sm`, `first-md`, `first-lg`, `first-xl`
- `last`, `last-sm`, `last-md`, `last-lg`, `last-xl`
### First
```html
A
B
D
D
```
### Last
```html
A
B
C
D
```
### Responsive example
```html
A
B
C
D
```
## Centered grid elements
You can use the `cols-offset-X` utilities to center elements.
```html
A
B
```
### Vertical and horizontal column centering
Using a combination of `cols-middle` and `cols-offset-X` we can create centered containers.
```html
Ipsum dolor amet alcatra landjaeger.
```
## Flex, Fit & Fill
The `flex`, `fill` and `fit` attributes can be used to align variable size elements. Example use the `flex` attribute to set all immediate children to flex items. Once set use `fit` to adjust element to fit only to its content size and use `fill` to fill in all available space.
- `flex`
- `fit`, `fit-sm`, `fit-md`, `fit-lg`, `fit-xl`
- `fill`, `fill-sm`, `fill-md`, `fill-lg`, `fill-xl`
```html
<
Ipsum dolor amet alcatra
>
```
## Visibility utilities
Multiple helper attributes to show and hide content to the corresponding grid breakpoints.
- `show`, `show-sm`, `show-md`, `show-lg`, `show-xl`
- `hide`, `hide-sm`, `hide-md`, `hide-lg`, `hide-xl`
```html
A works on inline elements
B
```
## Text alignment
- `text-left`, `text-left-sm`, `text-left-md`, `text-left-md`, `text-left-lg`
- `text-right`, `text-right-sm`, `text-right-md`, `text-right-md`, `text-right-lg`
- `text-center`, `text-center-sm`, `text-center-md`, `text-center-md`, `text-center-lg`
```html
text-left
text-right
text-center
```
## Float utilities
The float utils make it easy to float a item left, right, or center (margin auto). The `clear-fix` is a common clear fix utility to force content to clear a block element that is floated. Without a clearfix a single floated item will cause content immediately after it to potentially wrap content which may or may not be desired. Read more about [clear fix here](https://css-tricks.com/snippets/css/clear-fix).
- `clear-fix`, `clear-fix-sm`, `clear-fix-md`, `clear-fix-lg`, `clear-fix-xl`
- `float-left`, `float-left-sm`, `float-left-md`, `float-left-lg`, `float-left-xl`
- `float-center`, `float-center-sm`, `float-center-md`, `float-center-lg`, `float-center-xl`
- `float-right`, `float-right-sm`, `float-right-md`, `float-right-lg`, `float-right-xl`
```html
A
B
C
```
## Container
Basic `container` attribute to set max width and centered page level content. The container defaults to a maximum width of 1000px.
```html
Ipsum dolor amet
```