Like the flexible box layout, the grid layout helps do away with the use of properties such as float and clear, or script that can make the creation of layouts that change according to screen size cumbersome. It essentially allows you to define the width of columns, height of rows, gutters, and other characteristics of a grid layout. Again, like with the flexible box model, in order to be able to use it effectively, it is useful to be familiar with its anatomy and the terminologies used to describe it, as this helps in the better understanding the functions of grid properties. The basic building block of the model is the grid container, whose space is divided into grid areas (or grid cells) using intersecting horizontal and vertical lines, known as grid lines. There are two sets of grid lines: one set defines columns that run perpendicular to the writing mode axis (known as block axis or column axis) and the other set defines rows that run along the writing mode axis (known as the inline axis or row axis). This means that in horizontal writing mode, one set of grid lines define columns that run vertically and the other, rows that run horizontally. The grid areas are used to contain grid items (i.e., the grid container’s content/children). The space contained in a grid column or grid row (i.e., the space between adjacent grid lines) is known as grid track. Figure 20.1 shows an illustration of a grid that has four vertical and four horizontal gridlines.
- In Firefox, type about:config in the address bar and navigate to and enable the “layoutcss.grid.enabled”
- In Chrome, type chrome://flags in the address bar and navigate to and enable the “experimental web platform features”
- In Opera, type opera://flags in the address bar and navigate to and enable the “experimental web platform features”
Also, some of the things introduced here may change by the time the specification is finalized, but the changes should be minimal.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.