Skip to content
Starter Files + Solutions to my CSSGrid.io Course
Branch: master
Clone or download
wesbos Merge pull request #44 from andrewtdinh/update-lodash
Updating lodash to version higher than 4.17.5
Latest commit 38bf0e5 Feb 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
02 - Starter Files and Tooling Setup style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
03 - CSS Grid Fundamentals style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
04 - CSS Grid Dev Tools Add missing styles for the 04....-START.html Jan 5, 2018
05 - CSS Grid Implicit vs Explicit Tracks style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
06 - CSS grid-auto-flow Explained style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
07 - Sizing tracks in CSS Grid
08 - CSS Grid repeat function
09 - Sizing Grid Items style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
10 - Placing Grid Items style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
11 - Spanning and Placing Cardio style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
12 - auto-fit and auto-fill style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
13 - Using minmax() for Responsive Grids minmax-START has auto-fill in the video. Mar 2, 2018
14 - Grid Template Areas style: Remove spaces from the end of the line Jan 11, 2018
15 - Naming Lines in CSS Grid style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
16 - grid-auto-flow dense Block Fitting style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
17 - CSS Grid Alignment + Centering style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
18 - Re-ordering Grid Items
19 - Nesting Grid with Album Layouts style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
20 - CSS Grid Image Gallery
21 - Flexbox vs CSS Grid style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
22 - Recreating Codepen style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
23 - Bootstrappy Grid with CSS Variables style: Update page titles and directories to match syllabus on websit… Jan 11, 2018
24 - Responisve Website Add a placeholder script node to lesson 24 Mar 6, 2018
25 - Full Bleed Blog Layout put the content of the blog into the body tags on the finished and st… Jan 21, 2018
assets updated css background property Mar 1, 2018
.gitignore 👀 Dec 11, 2017
package-lock.json
package.json fix: upgrade browser-sync version to 2.24.5 to avoid vulnerable threa… Jun 26, 2018
readme.md

readme.md

CSS Grid Video Course

Hey! These are the starter files and finished solutions. Grab the full course over at CSSGrid.io.

Course FAQ

Q: I'm getting Browsersync Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

This is because some versions of Firefox are "FirefoxDeveloperEdition" and some new downloads are "Firefox Developer Edition". If you had downloaded the browser before the course, just remove the spaces from the package.json command so it says "FirefoxDeveloperEdition"

Q: I can't see the lines / numbers of Firefox' CSS Grid Inspection Tools

Make sure to turn off both "Use recommended performance settings" & "Use hardware acceleration when available“ within Preferences > Performance

Community CSS Grid Content

Feel free to submit a PR adding a link to your own recaps, guides or reviews!

A note on Pull Requests

These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.

The starter files + solutions will be updated if/when the videos are updated.

Thanks!

Live editable examples

I recommend you use the files in the repo, but if you prefer to use JSFiddle instead, here are all the starter files ready to go:

  1. Starter Files and Tooling Setup
  2. CSS Grid Fundamentals
  3. CSS Grid Dev Tools
  4. CSS Grid Implicit vs Explicit Tracks
  5. CSS grid-auto-flow Explained
  6. Sizing tracks in CSS Grid
  7. CSS Grid repeat function
  8. Sizing Grid Items
  9. Placing Grid Items
  10. Spanning and Placing Cardio
  11. auto-fit and auto-fill
  12. Using minmax() for Responsive Grids
  13. Grid Template Areas:
  14. Naming Lines in CSS Grid
  15. grid-auto-flow dense Block Fitting
  16. CSS Grid Alignment + Centering
  17. Re-ordering Grid Items
  18. Nesting Grid with Album Layouts
  19. CSS Grid Image Gallery
  20. Flexbox vs CSS Grid:
  21. Recreating Codepen
  22. Bootstrappy Grid with CSS Variables
  23. Responsive Website
  24. Full Bleed Blog Layout
You can’t perform that action at this time.