Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kutyel/css-grid

🎨 My code for Wes Bos CSS Grid course!
https://github.com/kutyel/css-grid

css css-grid css-grid-layout css-grids wesbos

Last synced: 15 days ago
JSON representation

🎨 My code for Wes Bos CSS Grid course!

Awesome Lists containing this project

README 

        
![](https://res.cloudinary.com/wesbos/image/upload/v1515524452/GRID-social-share_wlfzk3.png)



# CSS Grid Video Course



Hey! These are the starter files and finished solutions. Grab the full course over at [CSSGrid.io](https://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"



## Community CSS Grid Content



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



* [Course Review](https://www.bencodezen.io/blog/review-css-grid-with-wes-bos/) by [@bencodezen](https://www.twitter.com/bencodezen)



## 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:



02. [Starter Files and Tooling Setup](https://jsfiddle.net/6qvwur9q/)

03. [CSS Grid Fundamentals](https://jsfiddle.net/qxxpgg4j/)

04. [CSS Grid Dev Tools](https://jsfiddle.net/b55x8vh2/)

05. [CSS Grid Implicit vs Explicit Tracks](https://jsfiddle.net/mon8xdgb/)

06. [CSS grid-auto-flow Explained](https://jsfiddle.net/Loq4uj16/)

07. [Sizing tracks in CSS Grid](https://jsfiddle.net/q8h3r8yb/)

08. [CSS Grid repeat function](https://jsfiddle.net/8f8xyx86/)

09. [Sizing Grid Items](https://jsfiddle.net/wqs6tcuk/)

10. [Placing Grid Items](https://jsfiddle.net/hs5xhvpp/)

11. [Spanning and Placing Cardio](https://jsfiddle.net/2z7z6o9k/)

12. [auto-fit and auto-fill](https://jsfiddle.net/d1pLngzx/)

13. [Using minmax() for Responsive Grids](https://jsfiddle.net/xthszm2j/)

14. Grid Template Areas: 

    - [Area Line Names](https://jsfiddle.net/tkyxomht/)

    - [Areas](https://jsfiddle.net/p0sn7L7v/)

15. [Naming Lines in CSS Grid](https://jsfiddle.net/ygpmn0xh/)

16. [grid-auto-flow dense Block Fitting](https://jsfiddle.net/sxj83p70/)

17. [CSS Grid Alignment + Centering](https://jsfiddle.net/eyL9a2gv/)

18. [Re-ordering Grid Items](https://jsfiddle.net/uscf9mk0/)

19. [Nesting Grid with Album Layouts](https://jsfiddle.net/yn7jak0y/)

20. [CSS Grid Image Gallery](https://jsfiddle.net/cbjzped2/)

21. Flexbox vs CSS Grid: 

    - [Axis Flipping](https://jsfiddle.net/pt8hym9s/)

    - [Controls on Right](https://jsfiddle.net/4o7gavuj/)

    - [Flex on Item](https://jsfiddle.net/1u264ftd/)

    - [Perfectly Centered](https://jsfiddle.net/sgbrtrjo/)

    - [Self Control](https://jsfiddle.net/c6gg8pkn/)

    - [Stacked Layout](https://jsfiddle.net/mnfm1sw0/)

    - [Unknown Content Size](https://jsfiddle.net/4ze02bkj/)

    - [Unknown Number of Items](https://jsfiddle.net/Lg7r3jmy/)

    - [Variable Widths on Each Row](https://jsfiddle.net/qymhootd/)

22. [Recreating Codepen](https://jsfiddle.net/br6n54qt/)

23. [Bootstrappy Grid with CSS Variables](https://jsfiddle.net/gLLht2hd/)

24. [Responisve Website](https://jsfiddle.net/bh16ofp8/)

25. [Full Bleed Blog Layout](https://jsfiddle.net/j8w6v3mh/)