RocketGrids - Snippets of common CSS Grid layouts

Raw HTML + CSS snippets of common CSS Grid layouts.

Features

• Ready-to-use snippets to easily insert common CSS Grid layouts in your front-end projects.
• CSS Grid layouts library reference available on inarocket.com/resources/cssgrid-layouts.
• Figma file available on inarocket.com/resources/cssgrid-layouts.

Quick start

1. Open or create an HTML file and start coding.
2. Start typing 'rg-' and a list of CSS Grid snippets will show up.
3. Select the snippet you need. Its code will be inserted at cursor position.
4. Move the code marked as CSS to your project's stylesheet.

Using RocketGrids on Visual Studio Code:

RocketGrids library reference screenshot:

Figma file screenshot:

The goal of this extension is to help:

• front-end development beginners to learn how to build common CSS Grid layouts with raw HTML & CSS.
• front-end development professionals that don't want/need a CSS framework to quickly build CSS Grid layouts being more productive.

Known issues

None.

Release notes

1.0.0

Initial release of this extension.

About

• Web: In a Rocket: Learn front-end development at rocket speed.
• Author: Miguel Sánchez.