Home / Layout Patterns
Layout Patterns CSS Templates
A good layout decides what people see first and what they do next. These ten patterns cover the layouts people ask for most: bento grids for product pages, masonry for photos, split screens for restaurants, scrollytelling for stories and more. Every one is built with modern CSS Grid, Flexbox and scroll snap, with little or no JavaScript. Open the demo, then download the single HTML file.
021. Bento Grid
Orbit, a smartwatch product page
022. Masonry
Frame Club, a photo community
023. Split Screen
Salt and Ember, a wood fire restaurant
024. Broken Grid
Nomad Linen, a fashion lookbook
025. Scrollytelling
Hilltop Roasters, a bean to cup story
026. Horizontal Scroll
A museum timeline of 100 years of trams
027. Full Bleed
North Atlantic Walks, a hiking tour company
028. Card Carousel
Kiln, a pottery class studio
029. Magazine Layout
Tide and Table, a food and travel magazine