Building Grids

There are a number of ways to build grids with HTML and css. Let's look at a few of the most common.

We're going to build three grids, each very visually similar, but using different techniques. However, many of the styles will be shared across all three grids, and therefore each grid will have two classes: one that they all share (grid) and one that is specific to the technique (using-inline-block, using-flex, or using-grid).

Grids using the `table` element

Do not use tables to create layout grids. While the table element does indeed produce a grid of cells, its semantic purpose is actually to present data that is tabular, like a spreadsheet of numbers. It is not intended to be used as a layout tool for page content.

Grids using float

It is possible to use the float property to create grids, and you may see some suggestions online for doing so. Don't. As a general rule, you should only use float when you actually need to wrap text or other inline elements around another element.

Grids using inline-block

We've discussed how some elements are inline elements and some are block elements. We can control this behavior with the display css property.

There exists a hybrid of these two behaviors: display: inline-block;. Elements with this rule applied will be styleable like blocks, but will align themselves horizontally like words.

Abram Siemsen
Person Two
Person Three
Person Four
Person Five
Person Six
Person Seven
Person Eight

Grids using `flex`

Flex Layout, or flexbox, is another way to create a grid.

Abram Siemsen
Person Two
Person Three
Person Four
Person Five
Person Six
Person Seven
Person Eight

Grids using grid

Grid layout is another way to create columns using CSS.

Abram Siemsen
Person Two
Person Three
Person Four
Person Five
Person Six
Person Seven
Person Eight