CSS Grid Responsive Layout - W3Schools Video 03

Today we are going to continue with responsive Layout, using CSS Grid. CSS Grid is designed for grid layout, which is perfect for website layout. Currently all the mainstream browsers have already supported CSS Grid, unless you are sure that your users use older browsers, like IE 9, it is recommended to use CSS Grid to create layouts for websites. If you are not familiar with CSS Grid, you can refer to the tutorial on W3Schools:

The grid-template-areas is the key point here. You can see that the setting here is same as the final result. Where menu is the minimum width unit, the width of the header div equals to the width of six menus; the main div equals to three menus; the right div equals to two menus; and the footer div equals to five menus. The width of the menu is 1 unit, but it takes up two rows in height.

In this example, responsiveness was not considered, but we can do that just adding a small piece code of the media query.

W3Schools How-To Videos

W3Schools is a well-known web design/front-end development tutorial website, which not only provides detailed tutorials on HTML, CSS, JavaScript, etc., but also can be used as a reference, as it explains almost everything in the web design field. You probably have already visited this website as a frontend developer, because it often appears on the first page of many search results that are related to web design. And its How To section is really useful. It provides tutorials on, for example, how to make a SlideShow (picture carousel), a Lightbox, a Parallax effect and so on. So I want to do a series of videos dedicated to these How-Tos.