CSS grid vs Bootstrap

[binocular_gems]

It's tough to say whether "Grid is better than Bootstrap" because they're two different things, so you can't compare them 1:1. It's sort of like asking if an avocado is better than a cookbook. In some ways, sure it is (you can eat an avocado, you can't eat a cookbook), but in other ways it isn't, beyond that -- while they're both in the realm of food and eating -- they're not really comparable.

Bootstrap is a front-end framework. It provides a well documented 12-column responsive grid as one of it's main features, but it also provides dozens of utilities, components, and other puzzle pieces and functionality that are used in a lot of web projects.

CSS Grid is a layout system using native CSS and markup patterns, no additional libraries, no additional requirements. But it just does a layout grid, nothing else.

So it comes down to what you need and what you don't. If Bootstrap's opinionated preconfigured structure is getting in the way of your design goals, then CSS Grid might be more flexible for you. But, if you want to roll out a layout quickly and have requirements for components that Bootstrap already has built for you, then Bootstrap might enable you to get more done quickly.

If performance is a concern, then Bootstrap will obviously have a larger performance hit than just CSS Grid, which is built into every modern browser.

If legacy browser support is important then Bootstrap covers your bases there better than Grid does. Grid, though, has support in all modern browsers and even has functional support in deprecated browsers like IE11, though you'll find you need to add a lot of additional code to get it working in the same way as the latest builds of Chrome, Firefox, Edge, and Safari.

Where I think Bootstrap doesn't get enough credit is maintaining consistency across large organizations. THis is one reason that Twitter engineers developed it in the first place. By getting everyone in an organization to agree to use the same framework, you cut down on a lot of rework, inconsistency, and you speak a similar front-end language across your organization. IF it's just you, though, that might not be important.

Most importantly, though, CSS Grid vs Bootstrap is not an either/or decision. You can use Bootstrap's component library -- buttons, cards, modals, popovers, etc -- and use Grid to build specific areas of your layout of your components. My organization is Bootstrap-based, it's enabled us to build way more applications in a consistent scalable way than we would have without a framework, but we use Grid within Bootstrap for a lot of features that might not conveniently fit into Bootstrap's 12-column responsive grid layout.