6 Biggest Mistakes With The CSS Grid

There has been so much hype about the CSS grid 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.

In spite of the hype, there are some mistakes made by the admirers and users of the CSS grid.

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 CSS flexbox and float for instance are still part of the CSS and have their specific use and advantage in design.

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 NEWSWEEK web page below.

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 :

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 grid-template-columns, minmax and, auto-fit properties 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.

With the advent of the CSS grid, you should be able to create a layout that reacts to different sizes without necessarily using breakpoints.

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.

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.

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.

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 caniuse.com. No matter what the drawback is, you can use browser prefixes to solve this problem.

Start using the CSS grid now and see the superpowers of the page layout that comes with it.

Catch me on — Twitter | Github | LinkedIn