CSS Grid Crash Course - 8 Layout Examples

👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
💻 Premium Courses:
Professional JavaScript: bytegrad.com/courses/professi...
Professional CSS: bytegrad.com/courses/professi...
All courses: bytegrad.com/courses
🔔 Email newsletter (get new course discounts): email.bytegrad.com
0:00 Section 0 - Intro
1:48 Section 1 - How CSS Grid works
2:56 display: grid
3:33 grid-template-columns
4:12 grid-template-rows
6:09 fr-unit instead of px-unit
10:39 grid-column
12:23 grid-row
16:01 span
16:26 -1
16:55 column-gap, row-gap & gap
20:57 align-self
21:39 justify-self
23:14 justify-items
23:40 align-items
24:49 grid-template-areas
25:48 grid-area
27:48 Section 2 - Real layout examples
27:56 Example 1
31:30 Example 2
37:23 Example 3
40:59 Example 4
42:48 Example 5
43:41 Example 6
44:05 Example 7
44:36 Example 8
45:00 Example 9 (Bonus)
#cssgrid #css #css3 #webdevelopment #coding #programming

[@mohadesemousavisaeed5119]

This was by far the best tutorial that I’ve ever watched about css-grid.

[@RealJustJoe]

I can not agree more! By far the best one I have came across.

[@onlinewebsites3476]

Please make a bootstrap crash course .

[@quanghainguyen6632]

Thank you for the great course.
Next time, Please make the bootstrap crash course.

[@markdarucaaustria1234]

Thanks ByteGrad

[@ByteGrad]

Learn Flexbox next ruclips.net/video/xN1BkNItTRk/видео.html
Hi, mastering CSS is critical as a front-end developer: bytegrad.com/professional-css?n=126261
Also, mastering JavaScript is critical if you want to be a modern, professional developer: bytegrad.com/professional-javascript?n=126261

[@user-pt5gu2np5q]

♥♥♥♥♥

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2
Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752