CSS/Grid

There are several ways of creating a grid layout: Using  on the parent element, using , using  , using  , 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:

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. For a constant width and a variable count of elments per row, specify a width in a constant unit such as.

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</li>	<li style="display:inline-block; width:20px; background-color:#cfc;>2</li> <li style="display:inline-block; width:20px; background-color:#cfc;>3</li>	<li style="display:inline-block; width:20px; background-color:#cfc;>4</li> <li style="display:inline-block; width:20px; background-color:#cfc;>5</li>	<li style="display:inline-block; width:20px; background-color:#cfc;>6</li> </ul>

Style sheet:

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

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 " " tag with " " had to be added to prevent the next element from being right next to the list instead of below.

<ul style="width:50px; list-style:none;"> <li style="float:left; width:20px; background-color:#cfc;>1</li>	<li style="float:left; width:20px; background-color:#cfc;>2</li> <li style="float:left; width:20px; background-color:#cfc;>3</li>	<li style="float:left; width:20px; background-color:#cfc;>4</li> <li style="float:left; width:20px; background-color:#cfc;>5</li>	<li style="float:left; width:20px; background-color:#cfc;>6</li> </ul>

Style sheet:

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 " " tag manually, which takes more effort.

Example use:

Legacy HTML:

With CSS:

Style sheet:

column-width
The  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  and   vendor prefixes. The non-prefixed property  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.

<ul style="column-width:20px; width:60px; list-style:none;"> <li style="background-color:#cfc;>1</li>	<li style="background-color:#cfc;>2</li> <li style="background-color:#cfc;>3</li>	<li style="background-color:#cfc;>4</li> <li style="background-color:#cfc;>5</li>	<li style="background-color:#cfc;>6</li> </ul>

Style sheet: