CSS Grid is a relatively new and unused concept to CSS. It’s very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our device. CSS grid simplifies this process over other existing strategies. In this course we take you deep into how to build a variety of different layouts in CSS Grid. We cover the following:-All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them. Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level. We also show you how to override alignment at the grid item level. The basics of responsive web design, such as media queries and how they work with mobile / tablet etc. Grid areas and how it helps simplify responsive web designThe concept of implicit and explicit grids and what the differences areA deep look into the Autoplacement algorithmAnimation at a high level and what works currently with CSS GridHow to convert some layouts in Flexbox to use CSS Grid insteadWhen to use Flexbox over CSS GridOnce we cover all of these concepts, we then go about showing you some basic layout problems and how they can be solved. This includes:-Column based layoutBasic Sidebar layoutVertical Text alignmentModal alignmentStick footer layoutFormatting form fieldsAnd hopefully in future much more. We then look at some advance layout topics such as:-The Holygrail layoutThe Media Objects layoutA Viewport Friendly Image GalleryA Responsive Image GalleryAn Animated SidebarA Monthly Calendar layoutA Newspaper Cover layoutA Responsive Twitter Clone LayoutA Responsive Movie GalleryThen if you haven’t had enough, we have 3 real life application examples that will give you the experience you need. They are:-A Chat UIinterfaceAn Uber Eats Clone Responsive ApplicationA YouTube Clone Responsive Application