Introduction There has been so much hype about the since its release to many browsers by the end of 2017. In the real sense of it, the CSS grid is actually worth the hype and attention it has attracted, especially in the area of page layout and the challenges that come with media queries for responsive design. CSS grid 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. It is not a new thing that people usually compare and contrast new technology with the old ways of doing things.Many people now erroneously think that the emergence of the CSS grid means stuff like flexbox, float, and so on should be dumped in the dustbin. But wait, is that really the case? Certainly not! The and for instance are still part of the CSS and have their specific use and advantage in design. CSS flexbox float For instance, if you want a text to wrap around an image, this is achievable with the float property. You can see an example of this in the web page below. NEWSWEEK 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. The above code is a combination of css grid and css flex-box, it will provide an effect similar to the image below from : NEWSWEEK 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 emergence of the CSS grid, you don’t need to define breakpoints using media queries at all times to define how many columns you need in a particular screen size. With the use of you can bypass media query breakpoints. Also, you can avoid the overheads of importing CSS libraries into your application. However, if you use grid-template-areas you may need to define breakpoints. grid-template-columns , minmax and, auto-fit properties 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 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. onboarding and kb. 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 Graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers but falls back to an experience that while not as good still delivers essential content and functionality in older browsers according to MDN Most developers are reluctant to start using CSS Grid because of browser support, but the CSS grid is fully supported in all main browsers: Chrome, Mozilla Firefox, Safari, including their mobile versions. The only drawback is IE11. As at the time of writing this article, the CSS grid has a global usage of 93.75% according to . No matter what the drawback is, you can use browser prefixes to solve this problem. caniuse.com CONCLUSION Start using the CSS grid now and see the superpowers of the page layout that comes with it. It is to do your best: you must what to do, and do your best. not enough KNOW THEN - W.Edwards Deming — | | Catch me on Twitter Github LinkedIn

Stacks

Mozilla

Twitter

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

6 Biggest Mistakes With The CSS Grid

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Marshall Akpan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

6 Biggest Mistakes With The CSS Grid

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Marshall Akpan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES