Long description

Four rectangular boxes that consists of two rows and three columns depict the grid containers. Each container has five elements labeled, “A”, B, C, D, and E, with different alignments.

The first block of code is placed on the top left side of the figure and reads as follows. Line 1: open angle bracket div class equals open double quotes container close double quotes close angle bracket at indentation level 0. Line 2: open angle bracket div class equals open double quotes “a” close double quotes close angle bracket “A” open angle bracket forward slash div close angle bracket at indentation level 1. Line 3: open angle bracket div class equals open double quotes b close double quotes close angle bracket B open angle bracket forward slash div close angle bracket at indentation level 1. Line 4: open angle bracket div class equals open double quotes c close double quotes close angle bracket C open angle bracket forward slash div close angle bracket at indentation level 1. Line 5: open angle bracket div class equals open double quotes d close double quotes close angle bracket D open angle bracket forward slash div close angle bracket at indentation level 1. Line 6: open angle bracket div class equals open double quotes e close double quotes close angle bracket E open angle bracket forward slash div close angle bracket at indentation level 1. Line 7: open angle bracket forward slash div close angle bracket at indentation level 0.

The second block of code is at the right side of the first block of code and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: display colon grid semicolon at indentation level 1. Line 3: grid hyphen gap colon 10 p x semicolon at indentation level 1. Line 4: grid hyphen template hyphen columns colon repeat open parenthesis 3 comma 1 f r close parenthesis semicolon at indentation level 1. Line 5: grid hyphen template hyphen rows colon repeat open parenthesis 2 comma 200 p x close parenthesis semicolon at indentation level 1. Line 6: close curly brace at indentation level 0.

The first grid container is for first and second blocks of code. The first grid container has six grid cells arranged in two rows and three columns. The three grid cells on the first row are labeled “A” , B and C respectively. The first two grid cells in second row are labeled D and E respectively.

Note: With implicit layout, grid items are placed automatically.

The second grid container for third block of code is labeled Example 1. The second grid container has six grid cells arranged in two rows and three columns. The first and third grid cells on the first row are labeled “A” and B respectively. The three grid cells in second row are labeled C, D and E respectively.

The third block of code reads as follows. Line 1: dot “a” open curly brace at indentation level 0. Line 2: grid hyphen column hyphen start colon 1 semicolon at indentation level 1. Line 3: grid hyphen column hyphen end colon 3 semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

Note: 1 in line 2 indicates that the start and end numbers refer to the line number not the column number.

The same effect is also possible using either of the following:

grid hyphen column: 1 forward slash 3 semicolon.

grid hyphen column colon 1 forward slash span 2 semicolon.

The third grid container for fourth block of code is labeled Example 2. The third grid container has six grid cells arranged in two rows and three columns. The first and third grid cells on the first row are labeled “A” and C respectively. The three grid cells in second row are labeled D, B and E respectively.

The fourth block of code is placed below the third block of code, at the right of the third grid container and reads as follows. Line 1: dot b open curly brace at indentation level 0. Line 2: grid hyphen row colon 2 semicolon at indentation level 1. Line 3: grid hyphen column colon 2 semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

Note: Grid cells can be placed into any row and column.

The fourth grid container for fifth block of code is labeled Example 3. The fourth grid container has nine grid cells arranged in three rows and three columns. The first and third grid cells on the first row are labeled “A” and C respectively. The first and second grid cells in second row are labeled D and B respectively. The first grid cell in the third row is labeled E.

The fifth block of code is placed below the fourth block of code, at the right side of the fourth grid container and reads as follows. Line 1: dot c open curly brace at indentation level 0. Line 2: grid hyphen row hyphen start colon 1 semicolon at indentation level 1. Line 3: grid hyphen row hyphen end colon 3 semicolon at indentation level 1. Line 4: grid hyphen column colon 3 semicolon at indentation level 1. Line 5: close curly brace at indentation level 0.

Note: The E grid cell in the third row of fourth grid container indicates a new row is needed now to fit in the fifth child element.