This will be a shorter lesson. Its scope is to show how we can center the contents in a grid cell and also how we can combine CSS grid with any other type of layout manager.
In the third lesson of this example, we will use the
grid-template-rows to size the elements. Also, we will see the CSS grid auto-placement in action and how we can make a CSS layout to span the full height of the screen.
In the second part of this screencast series, we will see how we can use the grid-template-areas to define the general cell tiles of the layout. Also, by using the grid-area we will place each component in its corresponding grid cell.
Stay tuned as the next week I will publish two new episodes from this series.
Hey guys! After all of the recent articles about CSS grid, I am happy to announce that I've started to recoded a new screencast series. It will be a 6 part video course about making a responsive homepage layout with CSS grid and named template areas.
Below is the first part, describing the full example and the starting files. Drop me an email at daniel at js-craft.io with your feedback 🙂 Expect 1-2 videos per week.