What are the pros and cons of using CSS grid vs a framework like Bootstrap?

Question

What are the pros and cons of using CSS grid vs a framework like Bootstrap?

Answer

There a quite a few advantages to using the native CSS Grid over external grid frameworks. Some of the advantages include:

  1. Reduced code bloat. Rather than creating extra HTML elements to contain your grid, columns, and rows, your grid tracks are created within your stylesheet.
  2. Improved semantics. Frameworks like Bootstrap often compel developers to venture into divitis territory. What’s more, grid frameworks don’t always use the most semantically sound class names.
  3. Reduced file sizes. As CSS Grid is native, there is no need to include large libraries like Bootstrap in your projects.
  4. Speed of development. Once you learn the syntax, prototyping with CSS Grid is fast and efficient.

Right now, one disadvantage to using CSS Grid is that it is not supported by every browser. To see which browsers still do not support this feature, check out Can I use.