CSS Styles – Responsive Web Design – Using Grid Layout

The example scripts can be found in Book 1 - Programming Step by Step and More.

Book 1 is for sale on Amazon

1
2
3
4
5
6
7
8
9

The CSS Grid Layout module is a layout system that allows you to create complex interfaces and responsive designs using a structure of rows and columns.
An HTML element becomes a grid container when its display property is set to grid or inline-grid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

We use the grid-column property to specify where to place an element.
For example, in the previous 6-column web structure, Element 1 will start at Column 1 and end before Column 5.

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

The styles already define the divs in the order in which they should appear on the page (source code order). However, the syntax is:
grid-row-start | grid-column-start | grid-row-end | grid-column-end.
Element 20 will start at row line 1 and column line 2, and end at row line 5, column line 6.