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





Placing the 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:

VariableEffect
grid-column-startThe grid-line where the column starts.
grid-column-endThe grid-line where the column ends.
grid-row-startThe grid-line where the row starts.
grid-row-endThe 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:

ValueEffect
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.
autoAutomatic 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:

.item-1 {
   grid-column-start: 3;
   grid-column-end: 6;
   grid-row-start: 1;
   grid-row-end: 3;
}


or:

.item-1 {
   grid-column-start: 3;
   grid-column-end: span 3;
   grid-row-start: 1;
   grid-row-end: span 2;
}


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

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:

.item-1 {
   grid-area: TestArea 1 / 3 / 3 / 6;
}


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.


Horizontal alignment of items for the entire container

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:

ValueEffect
startThe items are aligned with the left border of the cell
endThe items are aligned with the right border of the cell
centerThe items are centered in the cell
stretchItems 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



Vertical alignment of items for the entire container

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:

ValueEffect
startThe items are aligned with the top of the cell
endThe items are aligned with the bottom of the cell
centerThe items are centered vertically in the cell
stretchItems 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



Horizontal and vertical alignment at the same time for the entire container

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.


Horizontal alignment of items for specific cells

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:

ValueEffect
startThe item is aligned with the cell's left border
endThe item is aligned with the cell's right border
centerThe item is centered horizontally in the cell
stretchThe 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

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:

ValueEffect
startThe item is aligned with the cell's top
endThe item is aligned with the cell's bottom
centerThe item is centered vertically in the cell
stretchThe item is stretched to fill the height of the cell (default)



align-self: start


align-self: end


align-self: center


align-self: center



Horizontal and vertical alignment of items for specific cells

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.