Evolution of CSS Layouts

CSS provides a number of properties that affect the layout of elements on the page, including those associated with floats, positioning, inline-block, columns, flexbox and grid. Some of these CSS features are not generally useful for laying out entire pages. Positioning, while it looks promising at first, is problematic when elements have a variable heights based on content from a database for example, making it impossible to know ahead of time where to place each element.

Inline-block is good at flowing blocks next to each other and wrapping to the next line when necessary, but it can’t easily create layouts that span columns/rows. CSS columns are good for one purpose: laying out text in multiple columns, while flowing text from one column to the next, but it is not for page layout. That leaves: floats, flexbox, and grid, which are are the main focus here.

Floats have been the tool of choice for page layout for many years. They have the advantages of universal browser support, and the ability to flow other page elements around them, or below them with clears. Many page layouts can be achieved with floats, but they do not provide for vertical centering, and can’t produce the “holy grail” layout where elements are centered both horizontally and vertically. They are also complex to use, and were not intended for page layout.

Flexbox is a major advance for page layout. It’s not as universally supported in browsers as floats, but support is good and getting better. Flex items in a flex container will adjust their sizes based on the width of the container and available space. The “holy grail” layout is achievable with both horizontal and vertical centering. One disadvantage of flexbox is that it is only one dimensional. It can layout a row for each flex container, and column spanning is possible by using multiple flex containers, but two dimensional layouts with both row and column spanning are harder to achieve and generally require multiple levels of nested flex containers.

Grid is designed to solve the problem of global page layout. Unlike flexbox, it works in two dimensions, allowing you to control both the row and column positioning and spanning of elements. Like flexbox it intelligently resizes boxes based on the size of the container and available space. Browser support is not yet as good as flexbox, but it will be widely supported in the next year or two.

Grid is best for laying out large areas of the page, but for UI elements, or things like image galleries, flexbox is still the tool of choice as it can handle a variable number of elements (e.g. a variable number of images for an image gallery), and is still the best way to perform vertical centering. Thus, the ultimate “best” choice for page layout is a combination of grid and flexbox, with grid controlling the big picture, and flexbox for individual UI elements. At last, floats can now return to their original intended purpose of flowing paragraph text around images!

Image Credit: Chicago by NASA at nasa.gov