Adaptive design using grid (CSS).
Part 3: Placing of items

When you have your grid with columns an rows in place, you can start placing the items. This is done using the following variables:

Variable	Effect
grid-column-start	The grid-line where the column starts.
grid-column-end	The grid-line where the column ends.
grid-row-start	The grid-line where the row starts.
grid-row-end	The grid-line where the row ends.

Note: Though the names of the variables refer to rows and columns, the values used for the variables are really grid-lines.


The valid values for the for variables are:

Value	Effect
line <number>	The line's number.
line <name>	The line's name. Only if you have specified at name.
span <number>	Number of grid-lines the item must span.
span <name>	The item must span the grid-lines, until it reaches a grid-line with the specified name.
auto	Automatic placement, automatic number of grid-lines the item must span or a default value of one grid-line, for the item to span.

So, it you want to place item-1 as the cells marked in red:



It could be:



or:



If you don't specify grid-column-end and/or grid-row-end, these are set to the default value 1.

You can have overlapping items. In that case you need to use z-index for stacking the layers.


If you want to, you also have the two shorthand parameters grid-column and grid-row that are combinations of grid-column-start + grid-column-end and grid-row-start + grid-row-end respectively. The syntax is

grid-column: <start-line> / <end-line> or <start-line> / span <value>;
grid-row: <start-line> / <end-line> or <start-line> / span <value>;

Note that start and stop are separated by a slash. The general recommendation from here is not to use the shorthand parameters, as you loose legibility of the code when using them.

The parameter grid-area serves two purposes: as naming of a grid-area and as a shorthand (compressed) specification of grid-row-start + grid-column-start + grid-row-end + grid-column-end. The syntax is:

grid-area: <navn> <row-start> / <column-start> / <row-end> / <column-end>;

Notice there is a space between the name and start/end for the rows and columns, whereas the coordinates start/end are separated by a slash. If we use item-1 from above, and give it the name TestArea, the code will be:



The recommendation from here is only to use grid-area for naming, as the used of specifying start/end will cost you some legibility of the code.

Alignment of all items in the container is done using justify-items which is applied to the container. It is completely similar to text alignment and alignment of items in flexbox. The values for justify-items are:

Value	Effect
start	The items are aligned with the left border of the cell
end	The items are aligned with the right border of the cell
center	The items are centered in the cell
stretch	Items are stretched to fill out the width of the cell (default)

In the examples shown below, all cells have the same alignment, as the parameter is applied to the container, but alignment can be specified for individual cells, if you want. In that case, you specify this, using the parameter justify-self, which is used on the individual items (more about this further down).

justify-items: start

justify-items: end

justify-items: center

justify-items: stretch

The vertical alignment is for all cells in the container is set using align-items, completely similar to vertical-align for text. The parameter can have the following values:

Value	Effect
start	The items are aligned with the top of the cell
end	The items are aligned with the bottom of the cell
center	The items are centered vertically in the cell
stretch	Items are stretched to fill out the height of the cell (default)

In the examples shown below, all cells have the same alignment, as the parameter is applied to the container, but alignment can be specified for individual cells, if you want. In that case, you specify this, using the parameter align-self, which is used on the individual items (more about this further down).

align-items: start

align-items: end

align-items: end

align-items: stretch

The variable place-items is a shorthand for align-items and justify-items. The syntax is place-items: align-items / justify-items (notice the slash as separator). If only one value is specified, place-items uses the value for both align-items amd justify-items. The variable is supposedly not supported by the Edge browser at the time of writing (August 2019), so it is a variable that one should give some thought, before using, or at least test whether it has started working, since the page was written. As always, the recommendation from here is to avoid using shorthand variables as you loose some legibility of the code.

Alignment of items for specific cells is done using justify-self which is applied to the item. If justify-self specifies an alignment different from the alignment specified using justify-items for the container, justify-self is the deciding parameter. For justify-self you have the following values:

Value	Effect
start	The item is aligned with the cell's left border
end	The item is aligned with the cell's right border
center	The item is centered horizontally in the cell
stretch	The item is stretched to fill the width of the cell (default)

justify-self: start

justify-self: end

justify-self: center

justify-self: stretch

Vertical alignment of items for specific cells is done using align-self which is applied to the item. If align-self specifies an alignment different from the alignment specified using align-items for the container, align-self is the deciding parameter. For align-self you have the following values:

Value	Effect
start	The item is aligned with the cell's top
end	The item is aligned with the cell's bottom
center	The item is centered vertically in the cell
stretch	The item is stretched to fill the height of the cell (default)

align-self: start

align-self: end

align-self: center

align-self: center

The variable place-self is a shorthand for align-self and justify-self. The syntax us place-self: align-self / justify-self (notice the slash as separator). If only one value is specified, place-self uses the value for both align-self and justify-self. The variable is supposedly not supported by the Edge browser at the time of writing (August 2019), so it is a variable that one should give some thought, before using, or at least test whether it has started working, since the page was written. As always, the recommendation from here is to avoid using shorthand variables as you loose some legibility of the code.