A responsive grid layout with typical areas includes a header, a footer, nav area, content area and a sidebar(s). Using fluid columns and grid-template-areas, we will create a reusable version of this basic layout. The layout will display as two column layout on smaller screen devices (780px and less), and as a three column layout on larger screen devices.
Our approach will be to use media queries to specify a min-width for the device and change the number of columns displayed with the use of the grid-template-columns property. We will use the newer fr units, which stands for fraction of the available space in the grid container. We will create the grid with the use of grid-template-areas.
W3Schools Responsive design media querries
Code a responsive CSS Grid layout from scratch.
Upon successful completion of the material students will be able to create a responsive CSS grid layout from scratch.