Example Application of Grid with CSS

Apart from its use for structuring layouts, grid is useful for general structuring and alignment goals. For example, as mentioned in Chapter 17, it can be used to align form controls. The example in Figures 20.30 and 20.31 shows how it can be used to achieve this, which in principle involves placing labels in one column, controls in another, and buttons at the bottom, spanning all columns.

In the example, the form{} rule defines a grid with two columns, and 5px column and row gaps. Notice that the rows are not explicitly specified.

When this is done, adding rows and sizing them is done automatically for the grid items. In the form > label {} rule, grid-column places each <label> element that is a direct child of the <form> element in the column that starts at the grid line named “labels” (i.e., first column), grid-row places it automatically in the next available row, and justify-self aligns it to the end of the column. Similarly, the form > input{} rule places all <input> elements in the “controls” column. The .buttons{} rule places the element of class=“buttons” (the container for the buttons) in column 1 and the next row, makes it span the two columns, and aligns it to the end. The “>“ selector is one of the selectors introduced in Chapter 8.

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 *