Managing Frontend Layouts: Bootstrap vs Flexbox vs CSS Grid

The most commonly-mentioned tools I come across when it comes to managing front end layouts are Bootstrap, flexbox, and CSS grid. They all have their place, and generally go from simplest implementation to more complex.

Bootstrap

Developed and later open-sourced by a developer at Twitter, Bootstrap is an all-in-one styling framework that makes adding CSS a simple and abstracted process.

Bootstrap works by assigning rows and columns as classes to elements. A huge plus for me has been using the special types of column assignments. For instance, if you assign a set of elements with a class of col-md instead of just col, elements display as normal side-by-side columns on desktop. However, when viewing the page on mobile (smaller than a md or medium-sized screen), the columns stack automatically for optimized mobile viewing.

This is incredibly useful for quick iteration of a design. In the early stages of developing a product, you don't care about load speed or efficiency as much as actually delivering the thing. Bootstrap is great for getting your work viewable quickly.

I love Bootstrap. It's my go-to when I need some quick-and-dirty styling. However, I find myself often only using it for aligning columns and pages.

If your goal is to get something simple up quickly, and you don't need to optimize for speed or efficiency, Bootstrap is a good bet. However, if you're only looking to manage the layout of a page and you care about optimization, it probably shouldn't be your go-to.

Flexbox

Flexbox is a part of CSS; it's a set of properties you can access within an element when the parent element's display is set to flex. It's the more flexible descendant of the older inline and inline-block display options.

It's always been a pain when I'm trying to go between block, inline, and inline-block just to line up some dang div elements that won't just go there. Early on, I would cheat and use position: absolute if I got frustrated enough. With the extreme variation screen sizes have today, Flexbox is a much better option, and absolutely the easiest way to order elements within a container.

Space child elements with justify-content: center or justify-content: space-evenly to the parent container.

Set the child div or other element to a percentage width the standard way, and you've achieved the same effect as Bootstrap's col without having to import an entire library.

Instead of messing with margin and padding tweaks, you can use the align-content property and its different options to get exactly the spacing and centering you want.

There are lots of simple but incredibly useful properties of flexbox that come together to make it the last styling property you need for precise layout design. You may need to play with the @media at-rule to make sure you're optimizing as well for different screen sizes, but overall, you get a lot of functional solutions right out of the box.

CSS Grid

CSS Grid is the most complicated and most precise option for CSS layout management.

The premise is simple: assign an element a display property of grid (or inline-grid) and you divide that element into a grid. Parameters like grid-template-columns and grid-template-rows are set explicitly in the grid. You set the number of rows in columns by setting their explicit heights and widths. You set the number of rows implicitly by setting their heights explicitly.

This lets you get incredibly precise from the get-go, but that's assuming you know exactly what you want.

It's exactly what you want if you're showing a lot of information on the screen at once and highly value visual organization. And there are some workarounds to the rigidity (like using percentages instead of pixel values). If you're trying to build a dashboard, you'll probably need CSS Grid. It's more work up front, but if you're trying to build something complicated, you'll need to use styling properties that can handle it.

Last Word

If you're like me, and you skip to the end to read the results, here you go:

• Bootstrap is great for getting simple work up quickly.
• Flexbox is solid for organizing container content and is the perfect middle ground between simple and robust.
• CSS Grid is the last layout organization you'll ever need. It's exactly as precise as you'll need it to be, but it requires more forethought and precision from the get-go.

Now, go off and make beautiful things.