https://github.com/pixelass/next-grid-workshop
https://github.com/pixelass/next-grid-workshop
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/pixelass/next-grid-workshop
- Owner: pixelass
- Created: 2021-08-10T05:03:40.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-12T06:12:46.000Z (almost 5 years ago)
- Last Synced: 2025-04-03T08:51:26.958Z (over 1 year ago)
- Language: TypeScript
- Size: 87.9 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Grid Workshop
This repository was created for a small workshop covering layout grids.
This Grid was developed by [Gregor Adams](https://github.com/pixelass). It uses the power of
CSS-variables (a.k.a custom css properties).
- [Getting Started](#getting-started)
- [Variants](#variants)
* [Flex](#flex)
* [Grid](#grid)
- [KISS Nesting](#kiss-nesting)
- [Mobile First](#mobile-first)
- [Advanced](#advanced)
* [On a grid](#on-a-grid)
* [On a row](#on-a-row)
## Getting Started
1. Clone this repository
```shell
git clone git@github.com:pixelass/next-grid-workshop.git
```
2. cd into the folder
```
cd next-grid-workshop
```
3. Install the dependencies
```
yarn install
## or with npm
npm install
```
4. Start the dev server
```
yarn run dev
## or with npm
npm run dev
```
The page for the workshop is available at http://localhost:3000/workshop. Its source can be found
in [src/pages/workshop.tsx](src/pages/workshop.tsx).
Additional documentation can be found in [docs](docs).
If you have questions, just
[open an issue](https://github.com/pixelass/next-grid-workshop/issues/new) and ask. Feel free to
formulate it in german or english. Answers will be given in the language of the question.
## Variants
There are two variants: `display: flex;`, `display: grid;`, each offering unique features.
### Flex
* Allows splitting columns
```tsx
Always half
```
### Grid
* Allows pushing columns
```tsx
2 columns wide starts at column 3
```
## KISS Nesting
You might have used grids that always have 12 columns if you nest them in each other. This grid
inherits the column count from its parent, making it very intuitive to define a desired column span.
```tsx
4 columns
4 columns
4 columns
4 columns
```
## Mobile First
This is a mobile-first grid, that collapsed columns depending on the viewport.
```
XS
┏━┳━┓
┃ ┃ ┃
┃ ┃ ┃
┃ ┃ ┃
┗━┻━┛
S
┏━┳━┳━┳━┓
┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┃ ┃
┗━┻━┻━┻━┛
M
┏━┳━┳━┳━┳━┳━┳━┳━┓
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┗━┻━┻━┻━┻━┻━┻━┻━┛
L
┏━┳━┳━┳━┳━┳━┳━┳━┳━┳━┳━┓
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┗━┻━┻━┻━┻━┻━┻━┻━┻━┻━┻━┛
```
## Advanced
If you need to break the grid logic you can define a compound grid which has its own logic.
This works for `flex` and `grid` variants.
### On a grid
```tsx
4 of 15
```
### On a row
```tsx
4 of 15
```