RocketGrids - Snippets of common CSS Grid layouts
Learn how to create common CSS Grid layouts with ready-to-use code snippets.
Rows: 1
Columns: multiple
Layout: 1row 2cols
VSC snippet: rg-1r2c
Layout: 1row 3cols
VSC snippet: rg-1r3c
Layout: 1row 2cols / big left
VSC snippet: rg-1r2c-bl
Layout: 1row 2cols / big right
VSC snippet: rg-1r2c-br
Rows: 2
Columns: halves
Layout: 2row 2cols
VSC snippet: rg-2r2c
Layout: 2row 2cols / rowspan left
VSC snippet: rg-2r2c-rsl
Layout: 2row 2cols / rowspan right
VSC snippet: rg-2r2c-rsr
Layout: 2row 2cols / colspan top
VSC snippet: rg-2r2c-cst
Layout: 2row 2cols / colspan bottom
VSC snippet: rg-2r2c-csb
Rows: 2
Columns: thirds
Layout: 2rows 3cols
VSC snippet: coming soon
Layout: 2rows 3cols rowspan left+right
VSC snippet: coming soon
Layout: 2rows 2cols rowspan left small
VSC snippet: coming soon
Layout: 2rows 2cols rowspan right small
VSC snippet: coming soon
Layout: 2rows 2cols rowspan left big
VSC snippet: coming soon
Layout: 2rows 2cols rowspan right big
VSC snippet: coming soon
Layout: 2rows 2cols colspan top & item 3
VSC snippet: coming soon
Layout: 2rows 2cols colspan top & item 2
VSC snippet: coming soon
Layout: 2rows 2cols colspan bottom & item 2
VSC snippet: coming soon
Layout: 2rows 2cols colspan bottom & item 1
VSC snippet: coming soon
Layout: 2rows 3cols rowspan item 1 & 2
VSC snippet: coming soon
Layout: 2rows 3cols rowspan item 2 & 3
VSC snippet: coming soon
Layout: 2rows 3cols rowspan left colspan item 2
VSC snippet: coming soon
Layout: 2rows 3cols rowspan right colspan item 1
VSC snippet: coming soon
Layout: 2rows 3cols rowspan left colspan item 4
VSC snippet: coming soon
Layout: 2rows 3cols rowspan right colspan item 4
VSC snippet: coming soon
Layout: 2rows 3cols colspan top
VSC snippet: coming soon
Layout: 2rows 3cols colspan bottom
VSC snippet: coming soon