Build Complex Layouts with CSS Grid Layout

In this course, we are going to learn about the CSS Grid Layout. The Grid Layout is a feature in CSS available in modern browsers.
CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.
We’ll discuss all the features CSS Grid has to offer us, and how we can apply these features to real world layout-based obstacles. We’ll start with placing items on a grid by using grid-column and grid-row and progress to more complex topics such as nesting grids within grids.

• Get up and running with CSS Grid Layout
• Place grid items on a grid using grid-column and grid-row
• Specify a grid gutter size with grid-gap
• Describe a grid layout using named grid lines
• Refer to fractions of available space with the fr unit
• Describe a grid layout using grid-template-areas
• Use the minmax function to specify dynamically-sized tracks
• Use the repeat function to efficiently write grid-template values
• Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def
• Change the auto-placement behaviour of grid items with grid-auto-flow
• Specify the sizes of implicitly created grid tracks
• Re-order the appearance of grid items using the order property
• Nest a grid within a grid
• Specify grid columns, rows, and areas at once with the grid-template shorthand
• Specify many grid properties at once with the grid shorthand