Pure CSS Layouts
CSS layouts arrange a page with flexbox, grid and positioning: holy grail pages, sidebars, masonry-style columns and responsive grids you can drop into a project.
28 free examples, most liked first. Click one to preview it and copy the code.
Theme Switch With :has()
by @admin · Layout
Masonry Columns Gallery
by @admin · Layout
Checkbox Modal Dialog
by @admin · Layout
Number Input Styled Spinner
by @admin · Layout
Filter Chips With :has()
by @admin · Layout
Floating Label Input
by @admin · Layout
Styled Date Input
by @admin · Layout
Native Input Validation Colours
by @admin · Layout
Sine Wave Section Divider
by @admin · Layout
Sticky Stacking Cards
by @admin · Layout
Scroll Shadow Panel
by @admin · Layout
Vertical Timeline
by @admin · Layout
Code Snippet Window
by @admin · Cards
Conic Gradient Pie Chart
by @admin · Layout
Custom Select Dropdown Arrow
by @admin · Layout
Auto-Dismiss Toast
by @admin · Layout
Sticky Table of Contents Sidebar
by @admin · Layout
Checkbox Lightbox Overlay
by @admin · Layout
Alert Banner Set
by @admin · Layout
Grow-In Bar Chart
by @admin · Layout
Drag Resize Split Panel
by @admin · Layout
Radio Multi-Step Form
by @admin · Layout
Perspective Parallax Layers
by @admin · Layout
Hover Focus Tile Grid
by @admin · Hover
Stacked Avatar Group
by @admin · Hover
Chat Bubble Thread
by @admin · Layout
Calendar Event Badge
by @admin · Cards
Tag Cloud Chips
by @admin · Hover
Layouts FAQ
Should I use flexbox or grid for layouts?
Use grid for two-dimensional page structure and flexbox for rows or columns of items. The layout examples here use each where it fits best.
How do I use these pure CSS layouts?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.