Data Overview
This is sample content to demonstrate the full-page scroll layout.
Layout Demonstrations
Various responsive grid layouts using PureCSS grid system.
Full Width Layout
Two Columns Layout (50/50)
Three Columns Layout (33/33/33)
Sidebar Layout (25/75)
Asymmetric Layout (67/33)
Four Columns Layout (25/25/25/25)
Mixed Pattern (1-2-1-2-1)
Complex Nested Layout
Card Layout Demonstrations
Various arrangements of cards using responsive grid layouts.
Full Width Card
Full Width Card
This card spans the entire width of the container.
Two Column Cards (50/50)
Left Card
Half width card on the left side.
Right Card
Half width card on the right side.
Three Column Cards (33/33/33)
Card 1
First of three equal cards.
Card 2
Second of three equal cards.
Card 3
Third of three equal cards.
Sidebar + Main Cards (25/75)
Sidebar Card
Narrow sidebar card for navigation or quick info.
Main Content Card
Wide main content card taking up most of the space.
Four Column Cards (25/25/25/25)
Card A
Quarter width card.
Card B
Quarter width card.
Card C
Quarter width card.
Card D
Quarter width card.
Mixed Pattern Cards (1-2-1-2-1)
Header Card
Full width header card.
Left Half
Left half card.
Right Half
Right half card.
Middle Card
Full width middle card.
Left Half 2
Another left half card.
Right Half 2
Another right half card.
Footer Card
Full width footer card.
Asymmetric Cards (67/33)
Main Content Card
Larger card taking up 2/3 of the space for main content.
Side Panel Card
Smaller card for supplementary content.