https://github.com/phiilu/solved-by-grid
Popular page layouts solved with css-grid
https://github.com/phiilu/solved-by-grid
collection css css-grid css-grid-layout
Last synced: about 1 year ago
JSON representation
Popular page layouts solved with css-grid
- Host: GitHub
- URL: https://github.com/phiilu/solved-by-grid
- Owner: phiilu
- Created: 2017-03-26T18:53:16.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-04-10T05:59:04.000Z (about 4 years ago)
- Last Synced: 2025-02-28T19:32:49.278Z (about 1 year ago)
- Topics: collection, css, css-grid, css-grid-layout
- Language: HTML
- Homepage: https://solved-by-grid.now.sh/
- Size: 3.85 MB
- Stars: 39
- Watchers: 3
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Solved *by* Grid
Solved *by* Grid is a personal collection of common HTML templates solved by the built-in [CSS Grid](https://www.w3.org/TR/css3-grid-layout/) feature.
CSS Grid allows to build complex layouts very simply and it is easy to learn.
# [Demo](https://solved-by-grid.now.sh/)
| Layout demo name | Preview |
| :----------------| :------:|
| [Sidenav footer 1](https://solved-by-grid.now.sh/with-sidenav-footer-1) | ![sidenav-footer-1] |
| [Sidenav footer 2](https://solved-by-grid.now.sh/with-sidenav-footer-2) | ![sidenav-footer-2] |
| [Holy grail](https://solved-by-grid.now.sh/with-holy-grail) | ![holy-grail] |
| [Sticky footer](https://solved-by-grid.now.sh/with-sticky-footer) | ![sticky-footer] |
| [Navbar-to-sidenav-toggle](https://solved-by-grid.now.sh/with-navbar-to-sidenav-toggle) | ![navbar-to-sidenav-toggle] |
[sidenav-footer-1]: ./animated-previews/with-sidenav-footer-1_sm.gif
[sidenav-footer-2]: ./animated-previews/with-sidenav-footer-2_sm.gif
[holy-grail]: ./animated-previews/with-holy-grail_sm.gif
[sticky-footer]: ./animated-previews/with-sticky-footer_sm.gif
[navbar-to-sidenav-toggle]: ./animated-previews/with-navbar-to-sidenav-toggle_sm.gif
# Contribute
Clone this repository and run `yarn install` ([`yarn`](https://yarnpkg.com/lang/en/) must be installed on your system) then run `yarn start` which runs a local webserver using `browser-sync`. Make sure your web browser supports CSS Grids.
Create additional layouts in folders like `my-new-template` and link to it from the root `index.html`.
# Kudos
* [Solved *by* Flexbox](https://philipwalton.github.io/solved-by-flexbox/)
* [Build Complex Layouts with CSS Grid Layout](https://egghead.io/courses/build-complex-layouts-with-css-grid-layout)