Long description

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

The first grid container shows “A” aligned to the top left in the first row, first column, C aligned to the top left in the first row, third column, D aligned to the top left in the second row, first column, and B aligned to the top left in the second row, second column. The cells in the grid are highlighted that indicates that the items in the grid are stretched so that it fills the cells as per its size.

The first block of code is at the right side of the first browser that reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon stretch semicolon at indentation level 1. Line 3: justify hyphen items colon stretch semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

The second grid container placed below the first grid container shows “A” aligned to the top left in the first row, first column, C aligned to the top left in the first row, third column, D aligned to the top left in the second row, first column, and B aligned to the top left in the second row, second column. The left end of the cells in the grid are highlighted indicating that the items in the grid are aligned to the left of the cell.

The second block of code is placed at the right side of the second grid container and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon stretch semicolon at indentation level 1. Line 3: justify hyphen items colon start semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

The third grid container placed below the second grid container shows “A” aligned to the top in the middle of the first and second column of the first row, C aligned to the top center in the first row, third column, D aligned to the top center in the second row, first column, and B aligned to the top center in the second row, second column. The position where the elements are placed is highlighted vertically indicating that the items in the grid are aligned along the vertical path of the elements in the cells.

The third block of code is at the right side of the third grid container and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon stretch semicolon at indentation level 1. Line 3: justify hyphen items colon center semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

The fourth grid container placed below the third grid container shows “A” aligned to the top right in the first row, second column, C aligned to the top right in the first row, third column, D aligned to the top right in the second row, first column, and B aligned to the top right in the second row, second column. The position where the elements are placed is highlighted vertically indicating that the items in the grid are aligned along the vertical path of the elements in the cells.

The fourth block of code is below the third block of code and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon stretch semicolon at indentation level 1. Line 3: justify hyphen items colon end semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

The fifth grid container placed at the right side of the second block of code shows “A” aligned to the top left in the first row, first column, C aligned to the top left in the first row, third column, D aligned to the top left in the second row, first column, and B aligned to the top left in the second row, second column. The position where the elements are placed is highlighted horizontally indicating that the items in the grid are aligned along the horizontal path of the elements in the cells.

The fifth block of code is placed at the right side of the fifth grid container and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon start semicolon at indentation level 1. Line 3: justify hyphen items colon stretch semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

The sixth grid container placed below the fifth grid container shows “A” aligned to the left center in the first row, first column, C aligned to the left in the middle of the first and second row, third column, D aligned to the left center in the second row, first column, and B aligned to the left center in the second row, second column. The position where the elements are placed is highlighted horizontally indicating that the items in the grid are aligned along the horizontal path of the elements in the cells.

The sixth block of code is placed at the right side of the sixth grid container and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon center semicolon at indentation level 1. Line 3: justify hyphen items colon stretch semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.

The seventh grid container placed below the sixth grid container shows “A” aligned to the bottom left in the first row, first column, D aligned to the bottom left in the second row, first column, B aligned to the bottom left in the second row, second column, and C aligned to the bottom left in the second row, third column. The position where the elements are placed is highlighted horizontally indicating that the items in the grid are aligned along the horizontal path of the elements in the cells.

The seventh block of code is placed at the right side of the seventh grid container and reads as follows. Line 1: dot container open curly brace at indentation level 0. Line 2: align hyphen items colon end semicolon at indentation level 1. Line 3: justify hyphen items colon stretch semicolon at indentation level 1. Line 4: close curly brace at indentation level 0.