Grid Layout Components

2-Column Grid

Column One

Content for the first column. This layout is perfect for comparisons or dual content presentation.

Column Two

Content for the second column. Both columns have equal width on desktop.

<div class="grid-2col">
    <div class="glass-card">Column One</div>
    <div class="glass-card">Column Two</div>
</div>

3-Column Deity Grid

🔱

Poseidon

God of the Seas

Ruler of all waters and earthquakes.

⚡

Zeus

King of the Gods

Supreme deity of Mount Olympus.

🔥

Hades

God of the Underworld

Ruler of the realm of the dead.

<div class="deity-grid">
    <div class="deity-card">
        <div class="deity-icon">🔱</div>
        <h3>Deity Name</h3>
        <p class="deity-title">Title</p>
        <p>Description</p>
    </div>
</div>

4-Column Feature Grid

📚

Rich Lore

Extensive mythology collection

🌟

Themes

Multiple visual themes

🔍

Search

Advanced search tools

🗺️

Maps

Interactive mythology maps

<div class="grid-4col">
    <div class="feature-card">
        <div class="feature-icon">📚</div>
        <h4>Feature</h4>
        <p>Description</p>
    </div>
</div>

Responsive Auto-Fit Grid

Item 1

Auto-sizing grid item

Item 2

Automatically adjusts

Item 3

Based on screen size

Item 4

Minimum 250px width

Item 5

Maximum 1fr width

Item 6

Responsive by default

<div class="grid-autofit">
    <div class="glass-card">Item</div>
    <!-- Items automatically arrange based on space -->
</div>

Asymmetric Grid

Featured Content

This card spans 2 columns, making it prominent in the layout. Perfect for highlighting primary content.

Secondary

Standard width card

Secondary

Standard width card

Secondary

Standard width card

<div class="grid-asymmetric">
    <div class="glass-card grid-span-2">Featured</div>
    <div class="glass-card">Normal</div>
</div>

Masonry-Style Grid

Short Card

Brief content.

Tall Card

This card has more content and will be taller than others. The grid adjusts to accommodate varying heights efficiently.

Additional paragraph to make it taller.

Medium Card

Moderate amount of content here for this card.

Short Card

Compact content.

Tall Card

Another card with extended content that makes it taller.

More text here.

And even more.

Short Card

Brief again.

<div class="grid-masonry">
    <div class="glass-card">Varying height content</div>
</div>