Grid Layout Test Fixture

grid-template-columns: 1fr 2fr 1fr

1fr

2fr

1fr

1fr

2fr

1fr

grid-template-columns: auto 1fr auto

Auto

Flexible 1fr

Auto

repeat(4, 1fr)

A

B

C

D

E

F

G

H

repeat(3, minmax(80px, 1fr))

Min 80px

Min 80px

Min 80px

Fixed widths: 100px 200px 100px

100px

200px

100px

Mixed: 80px 1fr 2fr

80px

1fr

2fr

80px

1fr

2fr

Grid Gap Variants

gap: 4px

A

B

C

D

E

F

gap: 24px

A

B

C

D

E

F

column-gap: 20px, row-gap: 8px

A

B

C

D

E

F