The alignment of grid and grid items can also be controlled, and this is achieved using the box-alignment properties, some of which have been introduced previously in Chapter 19. These properties allow you to control the alignment of boxes inside boxes. Essentially, they align contents within element, element within its parent, and items inside element; and alignment can be along inline/row and cross/column axes. The properties are justify- content, align-content, justify-self, align-self, justify-items, and align-items, and they take the same set of value keywords that specify the position of what is being aligned (known as alignment subject) relative to its containing box (known as alignment container). Table 20.7 lists the set of values supported in grid layout. Note that the values with “self-” prefix apply only to properties with “-self’ suffix.
1. Aligning All Grid Items in a Grid Container
The properties used to align all grid items collectively inside a grid container are justify-content and align-content, and justify-items and align-items, and they are specified inside the grid container’s rule.
1.1. justify-content and align-content
The justify-content and align-content properties allow you to align the contents of an element as a whole within the element itself In the case of a grid, all the grid areas/cells, and the contained grid items, are aligned relative to the grid container. It is in a sense like using the padding property on the grid container to align the contained grid (see for more on padding). The justify-content property aligns content along the row axis, while align- content aligns it along the column axis. Both are non-inherited. Figure 20.19 shows the effects of the values supported. The left and right values produce the same result as start and end, respectively, in left-to-right top-to-bottom writing, and stretch is not applicable. Figure 20.20 shows how the properties are used, using the center value.
In the example, the declarations in the .grid{} rule are again the same as in previous examples, except for a few differences. The rule makes the element of class=“grid” a grid container and its children grid items, sets its width and height, sets three columns and two rows, sets border line-style, and centers the grid (and grid items) in the grid container along both row and column axes. Notice that the justify-content and align-content properties are applied on the grid container and not on the individual grid items. This is because it is the container that is aligning the items rather than the items aligning themselves within the container. Also, as in previous examples, the ,A{}, .b{}, ,C{}, ,D{}, ,E{}, and. F{} rules simply specify the background color for the items.
1.2. justify-items and align-items
The justify-items and align-items properties are used to set the default values for the justify-self and align-self properties (which are discussed in greater detail shortly and used to control grid-item placement within its grid area). The justify-items property specifies default alignment along the row axis, while the align-items property specifies it along the column axis. Both are non-inherited. Figures 20.21 shows the effects of the main values supported. Notice that the grid items are auto-sized to fit their contents instead of stretched to fill their respective grid areas, which is the default behavior. This happens unless the stretch value is specified, or margins are set to auto. Using the auto value with the properties also computes to stretch. The left, self-start, right, and self-end values can also be used with the properties, with the result depending largely on writing mode. For example, in left-to-right top-to-bottom writing, left and self-start produce the same result as start, while right and self-end produce the same result as end. Figure 20.22 shows how the properties are used, using the center value.
In the example, the grid{} rule again does something similar to the previous example. It makes the element of class = “grid” a grid container and its children grid items, sets its width and height, sets two columns and two rows, makes its border lpx solid black line, and aligns the contained grid items. The justify-items property centers each grid item along the row axis within its containing grid area and align-items aligns each item along the column axis. The ,A{}, ,B{}, .C{}, ,D{}, ,E{}, and ,F{} rules set the background color for grid items “A”, “B”, “C”, “D”, “E”, and “F” (i.e., <div> elements of class equal to “A”, “B”, “C”, “D”, “E”, and “F”), respectively.
2. Aligning Grid Items Individually
2.1. justify-self and align-self
As you might have gathered earlier from the introduction to the justify-items and align-items properties, the properties used to align individual grid items are justify-self and align-self. They allow you to control the alignment of a box within its containing block. In the case of grid, they allow you to control the alignment of a grid item within its containing grid area. It is like setting the margin property on an individual grid item to align it within its containing grid area (see for more on margin). The justify-self property aligns a grid item along the row axis, while align-self aligns it along the column axis. The properties are specified inside the rule of the grid item being aligned and both are non-inherited. Figures 20.23 shows the effects of the main values supported. Grid item “B” is the item that is aligned with the properties. Notice that like with the justify-items and align-items properties, the grid item is auto-sized to fit its content instead of stretched to fill its grid area like others. As mentioned before, autosizing a grid item to fit content happens unless the stretch or auto values are specified for the properties, or margins are set to auto. The left, self-start, right, and self-end values can also be used with the properties, with the result depending largely on direction of writing. For example, in left-to-right top-to-bottom writing, as also noted before, left and self-start produce the same result as start, while right and self-end produce the same result as end. Figure 20.24 shows how the properties are used, using the center value.
The . grid{} rule in the example, again, makes the element of class=“gricT a grid container and its children automatically grid items; sets its width and height; sets three columns and two rows; and sets a border line-style. The .b {} rule sets the background color for grid item B and centers it along both row and column axes within the containing grid area with justify-self and align-self, respectively. Notice that the alignment properties are placed in the rule for the grid item and not in the rule for the grid container. This is because it is the item that aligns itself within the container rather than the container aligning the item. The ,A{}, .C{}, ,D{}, ,e{}, and . F{} rules set the background color for items A, C, D, E, and F (i.e., <div> elements of class equal to “A”, “C”, “D”, “E”, and “F”), respectively.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.