Review: CSS Grid v Bootstrap

Published: 

CSS Grid is a new feature introduced in CSS3. It offers a native CSS method for creating clear, structured grid styling for a website. This is my quick review to compare the experience of using CSS Grid in contrast to Bootstrap 3.

I’ve used basic Bootstrap formatting for a number of years and last year I spent time revising and improving my Bootstrap knowledge. I’ve always found Bootstrap to be an excellent tool but I’ve found the time required to code Bootstrap, particularly for more complex layouts, to often be quite a significant overhead. In this light, I’ve recently taken the time to learn the use of CSS3 Grid.

The CSS Grid system starts with a similar approach to Bootstrap but, rather than be restricted to manipulating Bootstrap’s twelve column structure, with the CSS grid-template-columnsand grid-template-rows commands you have more control over the composition of the grid. While a similar effect can be achieved by nesting <div> with Bootstrap column classes, I find the CSS Grid approach to be simpler and it keeps the HTML cleaner.

The grid-template-areas and grid-area commands add a visual structure to the layout in the CSS code. This speeds the process for developing a page, making it suitable for prototyping as well as production sites. It also makes altering an existing layout much simpler.

Combining CSS Grids with @media calls adds an extra level of flexibility. While in Bootstrap, some control over the representation of the page is possible by the application of multiple classes such as col-xs-* and col-md-* more complex behaviour in relation to changes to the viewport size generally mean using Javascript to modify the HTML code. With CSS Grid, the same changes can be simply handled using the @media call to implement a revised layout.

One further benefit of using CSS Grid rather than Bootstrap is the reduction in site overhead on load. With Bootstrap, the framework must be loaded either from a CDN or hosting system along with jQuery. Because CSS Grid is available as a native part of CSS3, so no extra load is incurred by its use. However, the real scale of any benefit is probably negligible in most cases, and for more complex sites jQuery may need to be loaded anyway.

Summary: Overall I’ve been very impressed with CSS Grids. I’ve managed to break a few layouts, mainly because I was making mistakes and needed to develop my skills in this area, but when I truly began to understand its workings I found it refreshingly easy to work with. It offers some significant benefits over Bootstrap, particularly when prototyping and the ability to simply make radical layout changes based on @media calls is especially powerful.

I wouldn’t advocate rewriting existing Bootstrap sites using CSS Grid unless a significant overhaul of the site is required, but I would recommend that you give serious thought about using it on new sites.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top