Properties for Creating Grid Layout in CSS

Like with the flexible box layout, a grid layout is declared using the display property. A grid container can be declared as block-level or inline-level. For a block-level grid element, the property takes the grid keyword, thus display: grid, and for an inline-level grid element, it takes inline-grid keyword, thus, display: inline-grid. Essentially, this declaration makes the element to which it is applied a grid container, the child elements of which automatically become grid items. Once a grid container is declared, grid properties are used to define the structure of the grid, including its alignment within its container and the alignment of grid items within the grid areas. Grid items are by default stretched to fit their containing grid areas. Like many CSS properties, grid-specific properties have both longhand and shorthand versions. Figure 20.2 shows the properties for defining grid structure and the longhand-shorthand relationships. The illustration shows, for example, that grid-template can be used to specify grid-template-columns, grid-template- rows, and grid-template-areas in a single declaration, and grid can be used to specify all the properties.

FIGURE 20.2 Grid-structure longhand-shorthand properties relationship.

1. Specifying Grid Columns, Rows, and Areas

The properties used for specifying grid columns, rows, and areas are the longhand grid-template-columns, grid-template-rows, and grid-template- areas properties and their shorthand, grid-template.

1.1. grid-template-columns and grid-template-rows

The grid-template-columns property allows you to specify the columns of a grid and their sizes, while the grid-template-rows property allows you to do the same for the rows. They are both non-inherited and take three values: none (a keyword that indicates that columns and rows will be generated as necessary by the browser); subgrid (a keyword that is used to make a grid item itself a grid container by giving it the display:grid declaration. The sub­grid created takes sizes of columns and rows from its parent grid and aligns to its axis). The third type of value supported is a list of space-separated values (known as track list) that specifies author-defined grid-line names and grid track sizes (i.e., column or row sizes). The grid-line names allow grid lines to be referred to by names, but if no names are specified, the lines can be referred to by automatically generated numerical index (i.e., 1, 2, and 3). Track size can be specified in a number of ways. Table 20.1 lists them. Figure 20.3 shows how some of the values are used and Figure 20.4 shows an illustration.

In the example, the .grid{} rule styles the <div> element of class=“grid”. The width property makes its width 90% of that of the browser window and height specifies its height. The display property makes it a grid container and its children automatically grid items. The grid-template-columns property specifies “first” as the name for the first column grid line, a size of 160px for the first column, “second” as the name for the second column grid line, a size of lfr (i.e., all free space) for the second column, and “last” as the name for the last column grid line. The grid-template-rows property specifies the rows in a similar manner. Given the specified columns and rows, the browser uses the auto-placement algorithm to automatically place the defined grid items (i.e., <div> elements of class equal to “A,” “B,” “C,” “D,” “E,” or “F”) in the defined grid areas. This is how the grid items are positioned as shown in Figure 20.4 without any explicit instructions given on where to place them. Notice also that the grid items are by default stretched to fit the grid areas. The •A{}, -b{}, .c{}, ,D{}, .e{}, and .f{} rules specify the background color for the respective grid item.

1.2. Specifying Multiple Names for a Grid Line

More than one name can be given to a grid line. This is usually done when a grid line is referred to as both the end and start of adjacent columns or rows. For example, in the declaration below:

grid-template-rows: [header-top] 50px [header-bottom main-top] lfr [main-bottom];

…the [header-bottom main-top] refers to the same grid line and means it represents both the bottom of a header and the top of the main row that is immediately below it.

1.3. Handling Repeating Values

If the definition for a grid contains repeating set of values, the repeat() function could be used for more coding and delivery efficiency. For example, using the function, the following declaration:

grid-template-columns: lOpx [begin] 160px [end] lOpx [begin] 160px [end];

is the same as the following:

grid-template-columns: repeat(2, lOpx [begin] 160px [end]);

In the declaration, the “2” specifies the number of repetitions, and the second set of values specifies the values to repeat.

1.4. grid-template-areas

The grid-template-areas property provides another method of defining a grid. It is used to specify named grid areas that are not related to any specific grid item but can be referenced by grid properties used to specify the placement of grid items (i.e., where grid items start and end, and how many columns or rows to span). The property is noninherited and takes one of two values: none (which defines no grid areas) or strings of grid names.

Each string represents a row, and each name in the string a column. It is essentially like using the names to construct a grid. As well as a name, one or more full stops can be used to represent a null (empty) cell. All cells together must form a rectangle for a grid definition to be valid. Figure 20.5 shows how the property is used and Figure 20.6 the result.

In the #grid{} rule in the example, width makes the width of the element of id=“grid” 90% that of the browser window, height specifies its height, and display makes it a grid container. The grid-template-areas property specifies three strings with two names in each. This means that three rows and two columns are defined for the grid template. This also means that the grid has six (i.e., 3×2) cells. Adjacent cells that have the same name are merged and treated as one cell. When a grid item is used in the same row or column more than once, it must be used consecutively. The grid-template- rows property specifies the size of the three rows and grid-template-rows specifies the size of the two columns. In the #grid header{} rule, grid-area assigns the <header> element (a grid item) to each grid area named “header” and background-color specifies the color. The #grid nav{}, #grid main{}, and #grid footer{} rules perform a similar function for <nav>, <main>, and <footer> elements, respectively. The grid-area property is shorthand for specifying the start and end of columns and rows (discussed further later).

1.5. grid-template

The grid-template property is the shorthand for grid-template-columns, grid- template-rows, and grid-template-areas, and allows you to specify columns, rows, and areas together. It is non-inherited and takes the values listed in Table 20.2.

2. Controlling Implicit Tracks and Items’ Auto- Placement

As you might have seen so far, grid columns and rows (i.e., grid tracks) are defined using grid-template and any of its longhand properties. The grid tracks created this way have fixed sizes and are known as explicit grid tracks, with explicit grid lines and sizes, and so on. However, grid tracks are also created in other ways, such as when a grid item is placed in a column or row that is not explicitly specified with the grid-template property or any of its longhand properties, or when the browser automatically generates additional columns or rows to contain grid items. Columns and rows created in these ways are known as implicit grid tracks and controlled with the grid-auto-columns, grid-auto-rows, and grid-auto-flow properties.

2.1. grid-auto-columns and grid-auto-rows

The grid-auto-columns property allows you to specify the size of an implicit grid column track, while the grid-auto-rows property allows you to specify the size of an implicit grid row track. Both are non-inherited and take a value, which can be any of the types listed earlier in Table 20.1 for grid- template-columns and grid-template-rows. Figure 20.7 shows how they are used and Figure 20.8 the result.

In the #grid{} rule in the example, display makes the <div> element of id= “grid” a grid container and its six children (i.e., <div> elements of id equal to “A,” “B,” “C,” “D,” “E,” and “F”) grid items, automatically. The grid-template-columns and grid-template-rows define a column and a row of 100px each, creating a grid that has only one cell and space for only one grid item. This means that given rule #A{}, which explicitly places grid item “A” in the explicitly specified column and row (using grid-column and grid- row), and rules #B{}, #C{}, #D{}, #E{}, and #F{}, which similarly explicitly place grid items “B” to “F” in the grid but in columns and rows that are not explicitly specified, the grid container automatically creates five implicit columns and rows to hold grid items “B” to “F” and sizes them to the width or height of the adjacent column or row. Notice their sizes in the output on the left in Figure 20.8 and the result on the right when the grid-auto-columns and grid-auto-rows properties are used to set their sizes to 100px. The rest of the declarations in rules #A{ }, #B{}, #C{}, #D{}, #E{}, and #F{} simply specify the grid items’ background color. Note that the grid-column and grid-row properties are used here only to more clearly demonstrate the functions of grid-auto-columns and grid-auto-rows, and discussed in greater detail later in this chapter with other properties used for positioning grid items in the grid.

2.2. grid-auto-flow

The grid-auto-flow property allows you to specify how the auto-placement algorithm should handle the flow of grid items that are not explicitly positioned if there are cells to contain them. It is non-inherited and supports the values listed in Table 20.3. Figure 20.9 shows how the property is used, and Figure 20.10 shows the effects of using different values with it.

In the . grid {} rule in the example, display makes the element of class=“grid” a grid container and its children grid items, grid-template- columns specifies five columns and grid-template-rows three rows. The grid-auto-flow property specifies how the grid items whose positions are not explicitly specified should be positioned in the grid. In order to be able to demonstrate the effects of all the values for the property, the grid-column and grid-row properties are again used here, but discussed in greater detail shortly. They are used to explicitly specify the column-row positions and spans for grid items “A” and “B,” and the positioning is such that a preceding cell is left empty so that the dense value can have an effect. Basically, “A” occupies column 2 row 1 and spans two rows, and “B” occupies the next column and row 1, and spans two columns. Notice in the outputs for the row and column values that the first grid cell (i.e., column 1, row 1) is empty and that it is filled with an item when the dense value is used and that this affects the ordering of the items. Notice also how the position of item A is always maintained because it is explicitly specified.

3. Specifying Gutters between Grid Columns and Rows

3.1. grid-column-gap, grid-row-gap, and grid-gap

The properties used to specify gutters (gaps) between grid columns and rows are longhand grid-column-gap and grid-row-gap properties, respectively, and the shorthand grid-gap, which is used to specify both together. They are all non-inherited and take length values (e.g., px and em). Figure 20.11 shows how grid-column-gap and grid-row-gap are used and Figure 20.12 the result.

The example is the same as that given earlier in Figures 20.5 and 20.6, but with grid-column-gap: 5px; and grid-row-gap: 5px; added. Notice the gaps between the columns and rows. The same values can be specified with the grid-gap property, thus, grid-gap: 5px 5px; (where the first value represents grid-column-gap and the second grid-row-gap) or grid-gap: 5px„ in which the single value is used as the value for both grid-column-gap and grid-row-gap.

4. Specifying All Grid Structure Properties Together

4.1. grid

All the grid properties introduced so far can be specified in a single declaration using the shorthand grid property, with the exception of grid- column, grid-row, and grid-area, which are grid item placement properties. The grid sub-properties (i.e., longhand grid properties) that can be specified with grid include explicit grid properties (grid-template-columns, grid- template-rows, and grid-template-areas), implicit properties (grid-auto- columns, grid-autorows, and grid-auto-flow), and gutter properties (grid- column-gap and grid-row-gap). The property is non-inherited and allows the values of the grid properties it supports to be specified in various forms. Some of these have been described in Table 20.4.

5. Specifying Grid Item Placement within the Grid

As earlier examples have repeatedly shown, it is possible to explicitly specify the position and span of a grid item in the grid. The properties used to achieve this are known as grid-placement properties and allow you to arrange and order grid items freely within the grid, irrespective of how the grid items are ordered in the source code. Placement is described in terms of the grid item’s edge that comes first in the block-flow direction (i.e., block- start), the grid item’s edge at the end of block-flow direction (i.e., block- end), the grid item’s edge from which the content of a grid item starts (i.e., inline-start), and the grid item’s edge at which the content of an item ends (i.e., inline-end). Which edge is which depends on the writing mode. For example, in the left-to-right-top-to-bottom writing mode, block-start is top, block-end is bottom, inline-start is left, and inline-end is right. The grid placement properties are grid-column-start, grid-row-start, grid-column-end, grid-row-end, grid-column, grid-row, and grid-area. Figure 20.13 shows the longhand- shorthand relationship between them.

5.1. Specifying Grid-Placement Values Separately

5.1.1. grid-column-start, grid-row-start, grid-column-end, and grid-row-end

The grid-column-start, grid-row-start, grid-column-end, and grid-row-end properties are longhand properties for specifying the start or end position of a grid item within a grid row or column. They are non-inherited and support the value forms listed in Table 20.5. Figures 20.14 and 20.15 show examples of how the properties are used and Figure 20.16 the result.

The example is again quite basic for the purpose of explanation. In the . grid {} rule, display defines a grid container (which automatically makes its children grid items), width specifies its width, height specifies the height, grid-template-columns specifies four columns and their start and end grid line names, and grid-template-rows specifies two rows in the same way, creating a total of eight grid areas (or cells). Grid items “A,” “C,” “D,” and “E” are placed automatically by the placement algorithm and rules. A{},
.C{}, ,D{}, and. E{} specify their background color. Only grid item “B” is explicitly positioned. The ,B{} rule specifies its background color as well as its explicit placement thus: grid-column-start says the start position within the grid row should be grid line 2 and grid-column-end says the end position should span two grid lines (which extends the item to the “fourth” line). Similarly, grid-row-start says that the start position within the grid column should be the grid line named “first” and grid-row-end says that the end position should span grid lines up to the one named “last.”

5.2. Specifying Column and Row Grid-Placement Values Separately

5.2.1. grid-column and grid-row

The grid-column property is shorthand for the grid-column-start and grid- column-end properties that allows you to specify them together, while grid- row is shorthand for grid-row-start and grid-row-end properties that allows you to do the same with them. Both are non-inherited and take the same types of values listed in Table 20.5 for their longhand. When either of the properties is used to specify the values of their longhand properties together, the values are separated with a slash. The value before the slash represents the value for grid-column-start/grid-row-start, and the one after the slash represents the value for grid-column-end/grid-row-end. If the second value is omitted, grid-column-end /grid-row-end is set to the same value or auto. Figure 20.17 shows how the properties can be used to achieve the same result as in Figure 20.16. The code works with the HTML in Figure 20.14.

The grid-column and grid-row properties in the example specify the same values specified earlier in Figure 20.15 with corresponding longhand properties thus: grid-column sets grid-column-start to “2” and grid-column- end to “span 2,” and grid-row sets grid-row-start to “first” and grid-row-end to “span last.”

5.3. Specifying All Grid-Placement Values Together

5.3.1. grid-area

The grid-area property is a shorter shorthand property for grid-column-start, grid-column-end, grid-row-start, and grid-row-end that allows you to specify the values for these longhand properties in a single declaration in the order <grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>, slashes included. Like the longhand properties, it allows you to specify the position and size of a grid item within the grid. It is non-inherited and supports the same types of values listed earlier in Table 20.5 for its longhand properties. The property can be used to specify single or multiple values as well as combinations of values. Table 20.6 lists some of them and how they are interpreted. Figure 20.18 shows how the property can be used to achieve, again, the same result as in Figure 20.16.

In the example, the grid-area property specifies the same values specified with the longhand properties in Figure 20.15. It sets grid-row-start to “first”, grid-column-start to “2”, grid-row-end to “span last”, and grid-column-end to “span 2.”

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *