by Peter Sommerhoff | Publisher: Packt Publishing | Release Date: November 2017 | ISBN: 9781788994477

Create CSS Grid layouts using the new grid system & use it together with CSS3 Flexbox and Sass for an amazing workflowAbout This VideoWell explained. Efficient teaching. Great skill to learn from CSS.Responsive layout with NO extra CSS, and convert an existing template, reducing the code by 90%, in less than two hoursThis course provides an excellent in-depth look at how to get up and running using SASS/SCSS.In DetailIn this course, you'll learn how to use all CSS properties defined in the CSS Grid specification, complete several exercise sheets to apply your new skills and create your own layouts with CSS Grids, write concise and readable CSS code, even for complex layouts, sketch layout prototypes in no time using CSS grid layouts, learn the basics of how this complements Flexbox and can work in combination with Sass. This course provides an excellent in-depth look at how to get up and running using SASS/SCSS. The instructor was very knowledgeable about SASS/SCSS and was able to provide explanations and examples that were relatively easy to follow assuming you have a pretty good understanding of CSS. There are many practice exercises included in this course for you to apply what you learn, along with my proposed solutions to look up on GitHub. So you'll get to apply and manifest your skills right away.

1. Chapter 1 : Introduction
   • Welcome to the CSS Grids Course! 00:02:34
   • What You'll Be Able to do after this Course 00:04:00
2. Chapter 2 : Intro to CSS Grid Layouts
   • What is CSS Grid? 00:03:52
   • Quick & Easy Set-Up 00:04:08
   • CSS Grid Terminology 00:02:51
3. Chapter 3 : Defining and Using CSS Grids
   • Intro 00:01:21
   • Enabling CSS Grid with display: grid 00:05:04
   • Defining the Grid: grid-template-rows & grid-template-columns 00:05:33
   • Arranging Grid Items: grid-row-start/end & grid-column-start/end 00:06:49
   • Spanning a Fixed Number of Rows or Columns: span 00:02:28
   • Naming Grid Lines 00:04:00
   • Defining Gutters: grid-row-gap & grid-column-gap 00:02:22
   • Source-Order Independence: order 00:03:16
4. Chapter 4 : Using Grid Areas, Equal Sizes, repeat() & minmax()
   • Intro 00:01:01
   • Using Grid Areas: grid-area 00:03:36
   • Using Grid Areas: grid-template-area 00:05:39
   • Repeating Rows and Columns: repeat() 00:08:26
   • The fr Unit 00:03:47
   • Defining Minimum and Maximum Sizes: minmax() 00:03:13
   • Auto-Filling a Grid with Rows and Columns: repeat(auto-fill) 00:04:20
   • repeat (auto-fit) 00:04:49
5. Chapter 5 : Justifying the Grid Container and Grid Items
   • Intro 00:01:21
   • Justifying Items horizontally: justify-items 00:03:23
   • Aligning Items Vertically: align-items 00:01:18
   • Justifying the Container: justify-content 00:06:18
   • Aligning the Container: align-content 00:02:49
   • Overriding Alignments: justify-self & align-self 00:04:42
6. Chapter 6 : The Implicit Grid and Grid Flow
   • Intro 00:02:25
   • The Implicit Grid: grid-auto-rows & grid-auto-columns 00:06:25
   • Flow for the Implicit Grid: grid-auto-flow 00:05:40
   • Shorthand When Using "grid" 00:07:26
7. Chapter 7 : Advanced CSS Grids
   • Intro 00:01:04
   • Overlapping Grid Items 00:05:53
   • Nested Grids 00:06:19
   • CSS Grid and Absolute Positioning I 00:10:11
   • CSS Grid and Absolute Positioning II 00:05:46
8. Chapter 8 : CSS Grids in Practice
   • Intro 00:02:38
   • Layout Prototyping I 00:08:41