Petals
Petals

Pluck Your
Perfect Grid.

Create stunning ready-to-use grids or design your own. Simple, Fast, and Beautiful.

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
  }

Popular Grid Templates

Diamond Pattern

Central Focus

Staggered Columns

Spotlight Grid

Asymmetric Mosaic

Gallery Grid

Diamond Pattern

Central Focus

Staggered Columns

Spotlight Grid

Asymmetric Mosaic

Gallery Grid

Join Our Community

We welcome contributions! Whether you're a beginner learning CSS Grids or an experienced developer passionate about layouts, your ideas, improvements, templates, or feedback are highly valuable.

Let's grow Petals together. Every contribution, big or small, is appreciated!

Star us on GitHub

Frequently Asked Questions

Create Your Perfect Grid Now

Made with ❤️ by the Shivam Katare