{"id":16236027,"url":"https://github.com/phiilu/solved-by-grid","last_synced_at":"2025-03-19T15:30:50.406Z","repository":{"id":19133049,"uuid":"86256819","full_name":"phiilu/solved-by-grid","owner":"phiilu","description":"Popular page layouts solved with css-grid","archived":false,"fork":false,"pushed_at":"2022-04-10T05:59:04.000Z","size":4033,"stargazers_count":39,"open_issues_count":5,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T19:32:49.278Z","etag":null,"topics":["collection","css","css-grid","css-grid-layout"],"latest_commit_sha":null,"homepage":"https://solved-by-grid.now.sh/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phiilu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-26T18:53:16.000Z","updated_at":"2024-05-14T17:06:38.000Z","dependencies_parsed_at":"2022-07-23T02:16:28.949Z","dependency_job_id":null,"html_url":"https://github.com/phiilu/solved-by-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phiilu%2Fsolved-by-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phiilu%2Fsolved-by-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phiilu%2Fsolved-by-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phiilu%2Fsolved-by-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phiilu","download_url":"https://codeload.github.com/phiilu/solved-by-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244002745,"owners_count":20382048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collection","css","css-grid","css-grid-layout"],"created_at":"2024-10-10T13:28:43.503Z","updated_at":"2025-03-19T15:30:49.761Z","avatar_url":"https://github.com/phiilu.png","language":"HTML","readme":"# Solved *by* Grid\n\nSolved *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.\n\nCSS Grid allows to build complex layouts very simply and it is easy to learn.\n\n# [Demo](https://solved-by-grid.now.sh/)\n\n| Layout demo name | Preview |\n| :----------------| :------:|\n| [Sidenav footer 1](https://solved-by-grid.now.sh/with-sidenav-footer-1) | ![sidenav-footer-1] |\n| [Sidenav footer 2](https://solved-by-grid.now.sh/with-sidenav-footer-2) | ![sidenav-footer-2] |\n| [Holy grail](https://solved-by-grid.now.sh/with-holy-grail) | ![holy-grail] |\n| [Sticky footer](https://solved-by-grid.now.sh/with-sticky-footer) | ![sticky-footer] |\n| [Navbar-to-sidenav-toggle](https://solved-by-grid.now.sh/with-navbar-to-sidenav-toggle) | ![navbar-to-sidenav-toggle] |\n\n[sidenav-footer-1]: ./animated-previews/with-sidenav-footer-1_sm.gif\n[sidenav-footer-2]: ./animated-previews/with-sidenav-footer-2_sm.gif\n[holy-grail]: ./animated-previews/with-holy-grail_sm.gif\n[sticky-footer]: ./animated-previews/with-sticky-footer_sm.gif\n[navbar-to-sidenav-toggle]: ./animated-previews/with-navbar-to-sidenav-toggle_sm.gif\n\n# Contribute\n\nClone 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.\n\nCreate additional layouts in folders like `my-new-template` and link to it from the root  `index.html`.\n\n# Kudos\n\n* [Solved *by* Flexbox](https://philipwalton.github.io/solved-by-flexbox/)\n* [Build Complex Layouts with CSS Grid Layout](https://egghead.io/courses/build-complex-layouts-with-css-grid-layout)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphiilu%2Fsolved-by-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphiilu%2Fsolved-by-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphiilu%2Fsolved-by-grid/lists"}