I am a software engineer, my passion includes the development of the human mind and building apps.
In spite of the hype, there are some mistakes made by the admirers and users of the CSS grid.
What are some of these mistakes?
1. Thinking that the CSS grid replaces everything that has to do with layout.
The combination of the aforementioned CSS technologies is a match made from heaven.
The basic way to use these technologies is to combine them for a seamless user experience. You can decide to have a grid container and then nest a flexbox within it, then you can use float for more effects and not necessarily for layout.
2. Thinking that you need breakpoints for everything.
The essence of releasing new technology is to make ways of doing things easier for developers.
With the advent of the CSS grid, you should be able to create a layout that reacts to different sizes without necessarily using breakpoints.
3. The Numbering system confusion
For users of CSS frameworks like bootstrap, you will be used to counting the number of columns in a row. But in the CSS grid, we count grid lines or stacks. One column will have two grid lines or stack. So in the grid system, the numbering refers to lines and not columns that we are already used to. 6 columns will have 7 lines for instance. So if you move from grid lines 1 to 7, it will span 6 columns.
4. Over-reliance on Frameworks
Frameworks usually come with the overhead of both onboarding and kb. With CSS grid no need for importing CSS frameworks, you write your own style guides using the CSS grid and upload it to Github, then adapt the code at any time to meet the requirement of your design mock-up. You only need some time and energy to achieve this.
5. Under utilizing the power of CSS grid rows.
Using the CSS row with the auto property can become very interesting. You make the height or the width of the grid container to grow or shrink according to the content inside it.
6. What about graceful degradation and browser support
Start using the CSS grid now and see the superpowers of the page layout that comes with it.
It is not enough to do your best: you must KNOW what to do, and THEN do your best.
– W.Edwards Deming