CSS/Grid

There are several ways of creating a grid layout: Using display:grid on the parent element, using display:inline-block, using float:left, using column-width, and using an old-fashioned table. Some of these examples have links to archived pages where said method has been implemented.

display:grid

This method is supported in browsers since early 2017. It automatically applies widths to child elements within a container, meaning a width does not need to be specified for the child elements.

• 1
• 2
• 3
• 4
• 5
• 6

Style sheet:

ul {
 display: grid;
 width: 50px;
 list-style: none;
 grid-template-columns: auto auto; /* two columns */
}
li { background-color: #cfc; }

display:inline-block

The display:inline-block method is supported in browsers since the late 2000s. As an example, YouTube uses this method on its shelf layout on channel pages since around 2013, when it deprecated support for Internet Explorer 7, which does not support this method.

It works by specifying a width for the child elements. For example, for five elements per row, specify width:20%. For a constant width and a variable count of elments per row, specify a width in a constant unit such as width:200px.

Make sure to make the container element slightly wider than the child elements to leave a small margin room which prevents the last element in the row from being pushed in the row below. In this example, the list container is 50 pixels wide, and the grid boxes within are 20 pixels wide:

• 1
• 2
• 3
• 4
• 5
• 6

Style sheet:

ul { width:50px; list-style:none; }
li { display:inline-block; width:20px; background-color:#cfc; }

Alternatively, the blocks can be made slightly narrower than the desired width of the fraction:

ul { width:40px; list-style:none; }
li { display:inline-block; width:18px; background-color:#cfc; }

Float

The float element was used by YouTube on its channel pages until early 2013 to maintain support for Internet Explorer 7. However, since floating is not intended for creating grid layouts, additional CSS parameters may be necessary to justify the content. For example, below the following grid, an additional "<div>" tag with "clear:both" had to be added to prevent the next element from being right next to the list instead of below.

• 1
• 2
• 3
• 4
• 5
• 6

Style sheet:

ul { width:50px; list-style:none; }
li { float:left; width:20px; background-color:#cfc; }

Table

A table can be used to create a grid layout since the early days of graphical web browsers, but the number of elements per row can not adapt to screen width, and each row of items needs to be put inside a separate "<tr>" tag manually, which takes more effort.

Example use:

Legacy HTML:

1	2
3	4
5	6

With CSS:

1	2
3	4
5	6

Style sheet:

table { width:50px; border-spacing:1px; }
td { width:20px; background-color:#cfc; }

column-width

The column-width property is popular for creating "waterfall" layouts with constant widths but variable heights per item. On Firefox and Chrome, it was implemented in the late 2000s with the respective -moz- and -webkit- vendor prefixes. The non-prefixed property column-width was first implemented in 2012 in Internet Explorer 10, then on Chrome 50 in 2015 and Firefox 50 in 2016.

Distinctly, the items are located in a vertical instead of a horizontal order.

• 1
• 2
• 3
• 4
• 5
• 6

Style sheet:

ul { column-width:20px; width:60px; list-style:none; }
li { background-color:#cfc; }