Display Grid

Should render a 2x2 grid

1

2

3

4

Should render a 2x2 grid with the first row having a height of 50px

1

2

3

4

Start of crash tests

1

1

2

3

6

2

3

4

5

1

6

1

1

1

1

1

1

1

1

2

3

4

1

1

1

End of crash tests

Should render a 2x2 grid with columns 50px and 50%

1

2

3

4

Should render a full-width 4x4 grid with:

• one large column on the left
• one large column on the right, being split in half vertically, with the number 2 in the top half, and numbers 3, 4, 5, and 6 in the bottom

1

2

3

4

5

6

Should render 2 items with no grid formatting (one on top of the other)

1

2

Should render 2 items with no grid formatting (one on top of the other)

1

2

Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space, they will expand up to 300px each.

1

2

Since there is no vertical limit, the two rows should be 50px high each.

1

2

Since there is a height limit, the rows should be 25px high each.

1

2

2

2

3 columns with minimum 200px and maximum 100%.

1

2

3

Auto-fill of minimum 250px, max 1fr

1

2

3

Auto-fit of minimum 250px, max 1fr

1

2

3

Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum

1

Article content

3

Named tracks there should be 4 grid items in a circle with a space in the middle

1

2

3

4

Should render a 2 columned grid

1

2

Should render 2 50px columns and 2 100px columns

1

2

3

4

Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2

1

2

3

4

Should render a 64px wide image

There should be a large (50px) column gap and small (10px) row gap

1

2

3

4

There should be a Z-shaped gap (with both vertical and horizontal gap)

1

2

There should be a column spanning 8 units, and then one spanning 4

1

2

There should be a column spanning 4 units, and then one spanning 8

1

2

There should be a row spanning 2 units, and then one spanning 3

1

2

There should be 1 column that starts at column 2 and spans until the end.

1

There should be 1 column that starts at column 2 and spans until the end.

1

The bottom row should take up half the width of the grid.

1

1

Grid template areas basics

right-bottom

left

right-top

There should be a left-aligned column taking up 1 / 3 of the grid

1fr

Column taking up 50% width

1fr

Left-aligned column taking up 25% width

1fr

Left-aligned column taking up 25% width

1fr

Min-content / Max-content / 1fr column widths

min-content

max-content

1fr

Bug with column gaps - grid items should have normal height

left side text

right side text right side text right side text