In the last article, we learned about grid gaps in CSS and also created basic CSS Layout using Css Grids which was responsive. Now as we have learned all basic properties to create our final CSS grid layout for our website layout.
We are going to recreate the same layout as we created in 'Standard Website Layout' as we created without CSS Grids but the difference that it will be responsive.
Let's do it...
We are going to recreate the same layout as we created in 'Standard Website Layout' as we created without CSS Grids but the difference that it will be responsive.
Let's do it...
Standard Website Layout using CSS Grids
This layout will contain:- Header
- Three unequal columns
- Footer
On smaller screens, the columns will stack on top of each other. We can visualize it by resizing the window of the browser OR by clicking here CSS button by resizing the width of output in Codepen window.
I encourage you to try to write it yourself before seeing the code...
Yeah...
We have successfully created the standard responsive website layout using CSS Grids which you can use to create other elements. With this, we also completed this 5-article series on CSS Grids.
---------------
---------------
There are many more things you can learn about CSS Grids.
Here is the link to one course you will surely like to study CSS Grids in detail:
https://scrimba.com/g/gR8PTE
This is really nice and innovative website where you learn coding by watching the video and simultaneously coding in the video!!! Yes, you type inside the video...
Be sure to check it out...
---------------
---------------
That's all for today. In the next article, we will start some new concept in CSS.
Till then #keepCoding.
