Since the beginning of the web, developers and designers have wanted to create more and more complex layouts for pages. As the web has evolved, so have the techniques for creating complex layouts. Where we used to use tables to divide up the page into headers, menus, sidebars, and footers, we now have a whole range of choices that can help us layout entire pages or small, simple components.

Knowing what options are available and what each option is capable of is essential to creating complex layouts. Let’s dig into the major options that modern web development has to offer.

Floats

After using tables for layout fell out of style, which was a good thing, floats became the new way of creating layout. It was a perfectly logical choice: normal block elements stack top-to-bottom and floating lets you stack things side-by-side. This is how floating was used in the original Bootstrap grid system. The problem with floats, though, is that they were not intended for building entire page layouts or even smaller component layouts. Like tables, their purpose was narrower. They were designed to mimic paper layouts where images would be floated left or right, and the text would wrap around them. Floats are great at that:

Many of the issues with using floats for layouts were browser-specific (looking at you, IE). but even in modern browsers floats have their quirks. For example, if you have an element where all the children are floated, the parent element will have no height. This is because a floated element is removed from the text flow and thus reports no height to the parent element. There are several ways around this, the most popular being a “clearfix”, but with newer options available floats just aren’t worth the hassle and should be relegated to making text flow around an element.

Flexbox

Flexbox, or the “CSS Flexible Box Layout Module”, is a new CSS display option for creating flexible layouts along a single axis. You set properties on the parent element (flex-flow, justify-content, etc.) and the children will respond automatically. You are easily able to control spacing, alignment, sizing, and ordering of child elements to create complex and useful layouts.

One main advantage of flexbox over floats is that the axis we use is a property and can be changed. Floating only works horizontally, where flexbox is more agnostic about the direction. You can arrange items in rows or columns and even reverse the orientation, so items are lined up right-to-left or bottom-to-top.

The AWH site is a good example of flexbox. Looking at the home page banner above, we have the header as a flex container. It’s oriented as a row so the two main blocks are aligned side-by-side. To space the elements out along the main (horizontal) axis, we use justify-content: space-between which keeps the elements at the edge of the container and puts any extra space between them. Since the image has a fixed size, it simply stays on the right side allowing the text block to expand and contract as needed.

The list of blog posts on the AWH site is another great example of using nested flexbox containers to achieve a more complex layout. Each post in the list is a horizontal container consisting of the image, text, and arrow (the red outlines). The text block is itself a vertical container so we can align the title at the top and the author tag at the bottom (blue outlines). That author tag is yet another nested flexbox container, this time back to horizontal, so we can put the image next to the text (the green outlines).

This kind of nesting is perfectly fine and functional, though it can lead to some messy HTML. In the next section, we’ll see how we can simplify this complex layout.

Grid

Grid is the newest layout option in CSS. It allows for complex, multi-dimensional layouts. Like flexbox, most of the properties are defined on the parent element. When you declare an element to be a grid, you define the number and size of the rows and columns you want. Child elements will automatically fall into these slots, but you can also manually assign them where they need to go. That last part is especially useful for responsive layouts where you can maintain the same order of your HTML in source while changing the order in which those elements are displayed.

#css #developer #css-layout