https://github.com/johnhunter/css-grid-examples

Examples for a grid talk
https://github.com/johnhunter/css-grid-examples

Last synced: about 2 months ago
JSON representation

Examples for a grid talk

• Host: GitHub
• URL: https://github.com/johnhunter/css-grid-examples
• Owner: johnhunter
• Created: 2022-05-15T16:54:52.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-24T21:01:33.000Z (over 2 years ago)
• Last Synced: 2024-10-29T03:23:21.059Z (2 months ago)
• Language: HTML
• Size: 29.3 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# css-grid-examples

Examples for a grid talk

- [layouts](./layout/index.html)

## Comments

If you have comments or questions you can raise them in the [Discussions area](https://github.com/johnhunter/css-grid-examples/discussions). Please bear in mind this is a public repo so don't talk about anthing confidential. 🙂

Additions and fixes are welcome, please raise a PR.

## Running locally

Just clone and open. For the talk I used the VSCode [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

## Covered

- [x] Historic layouts (table and floats)

- [x] Flexbox based grids

- [x] Explicit grid (columns)

- [x] Explicit grid (areas)

- [x] Example grid layout

- [x] Implicit vs expicit grid

- [x] Controlling track sizes

## Resources

- [CSS Grid on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

- [Grid by Example - Rachel Andrew](https://gridbyexample.com/)