Page Layout and Responsive
Grid, columns, master-detail views, and responsive page layouts.
Responsive Card Grid
Travel-themed cards that automatically reflow, built with CSS Grid.
Open and runArchitectural Journal Bento Grid Layout
Complete a bento grid layout in a journal scenario: real content, actionable controls, clear state feedback, and layouts that adapt across sizes.
Open and runSplit-Screen Narrative Layout for an Architecture Journal
Complete a split-screen narrative layout for an architecture journal scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runClassic three-column architectural layout
Complete the classic three-column layout in an architecture journal scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runArchitectural Journal Dashboard Shell
Complete a dashboard shell for an architectural journal scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runArchitecture Journal Editorial Grid
Complete the magazine editorial grid in an architecture journal scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runResponsive Masonry Layout for Architecture Journal
Responsive masonry layout for an architecture journal scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runArchitectural Journal sticky sidebar layout
Complete the sticky sidebar layout in an architecture journal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runArchitectural Journal Full-Width Interleaved Layout
Complete a full-bleed interleaving layout for an architecture journal scenario: includes real content, interactive controls, clear status feedback, and layouts across screen sizes.
Open and runAdaptive Gallery for Architectural Journals
Complete the adaptive gallery in an architecture journal setting: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runArchitectural Journal Master-Detail Content Layout
Complete a master-detail content layout in the context of an architecture journal: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runCommunity Portal Bento Grid Layout
Complete the Bento-style grid layout in a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCommunity portal split-screen narrative layout
Complete a split-screen narrative layout for a community portal scenario: includes real content, interactive controls, clear status feedback, and a responsive multi-size layout.
Open and runClassic Three-Column Community Portal Layout
Complete a classic three-column layout for a community portal scenario: including real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runCommunity Portal Dashboard Shell
Complete the dashboard shell in a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runCommunity Portal Magazine Editorial Grid
Complete a magazine editorial grid in a community portal scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runResponsive Masonry Layout for the Community Portal
Complete a responsive masonry layout in a community portal scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runCommunity portal sticky sidebar layout
Complete a sticky sidebar layout in a community portal scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCommunity Portal Full-bleed Layout
A full-bleed layout completed for a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCommunity Portal Adaptive Gallery
Complete a responsive gallery for a community portal scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runCommunity Portal Master-Detail Content Layout
Create a master-detail content layout for a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runVisual Story Bento Grid Layout
Complete a bento-style grid layout in an image-story scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runCinematic Story Split-Screen Narrative Layout
Complete a split-screen narrative layout for an image-story scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.
Open and runClassic Three-Column Layout for Visual Storytelling
Complete the classic three-column layout in an image-story scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runVisual Story Dashboard Shell
Complete the dashboard shell in an image-storytelling scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runEditorial Grid for Visual Story Magazine
Complete the magazine editorial grid in the image-story scenario: includes real content, interactive controls, clear status feedback, and layouts for multiple sizes.
Open and runResponsive Photo Essay Masonry Layout
Build a responsive masonry layout for an image-story scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runImage Story Sticky Sidebar Layout
Complete a sticky sidebar layout in an image-story setting: includes real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runFull-Bleed Photo Essay Layout
Complete a full-bleed interleaved layout for an image-story scene: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runResponsive gallery for image stories
Complete an adaptive gallery in an image-story scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runResponsive Master-Detail Layout for a Photo Essay
Complete a master-detail content layout in an image-story scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and runResearch Notes Bento Grid Layout
Complete a bento grid layout in a research notes scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runResearch Notes Split-Screen Narrative Layout
Create a split-screen narrative layout for a research notes scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runClassic three-column research notes layout
Complete a classic three-column layout in a research-notes scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.
Open and runResearch Notes Dashboard Shell
Complete a dashboard shell in a research notes scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runResearch Notes Magazine Editorial Grid
Complete a magazine editorial grid in a research notes scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runResponsive Masonry Layout Research Notes
Complete a responsive masonry layout for a research notes scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runSticky Sidebar Layout for Research Notes
Complete a sticky sidebar layout in a research-notes scenario: include real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runResearch Notes Full-Width Overlapping Layout
Complete a full-bleed layout in a research notes scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runResearch Notes Adaptive Gallery
Complete the adaptive gallery in the research notes scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runResearch Notes Master-Detail Content Layout
Complete the master-detail content layout for a research notes scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runBento Grid Layout for Product Documentation
Complete a bento grid layout for the product documentation scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runSplit-screen narrative layout for product documentation
Complete a split-screen narrative layout in the product documentation scene: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runArchive reader adaptive gallery
Complete an adaptive gallery for an archive reader scenario, including real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runAudio archive dashboard shell
Complete a dashboard shell for an audio archive scenario: including real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCare Center magazine editorial grid
Complete the editorial grid in a care center scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runResponsive Full-bleed Care Journal Layout
Complete a full-width layered layout for a care log scenario, with realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runClassic Three-Column Archive Atlas Layout
Complete a classic three-column layout in an archive atlas scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and runArchive Briefing Responsive Masonry Layout
Complete a responsive masonry layout for an archive briefing scenario, with realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runArchive Brochure Master-Detail Layout
Complete a master-detail content layout in an archive brochure scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runArchive Special Issue Sticky Sidebar Layout
Complete a sticky sidebar layout for an archive special issue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runAdaptive Gallery for Archive Guides
Create a responsive gallery in the archive guide scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runArchive Display Bento Grid Layout
Create a bento-style grid layout for an archive display scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runArchive Notebook Dashboard Shell
Complete a dashboard shell in an archive notebook scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runArchive Recap Page Magazine Editorial Grid
Complete a magazine editorial grid for the archive recap page scenario, including real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCare Atlas Full-bleed Interleaved Layout
Complete the full-bleed layout in the care atlas scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runClassic three-column responsive layout for care briefing
Complete a classic three-column layout in a care briefing scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and runCare handbook responsive masonry layout
Complete a responsive masonry layout in a care handbook scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCare Digest Master-Detail Content Layout
Complete the master-detail content layout in the care special issue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCare guide split-screen narrative layout
Complete a split-screen narrative layout in a care-guide scenario: real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runCare Exhibit Sticky Sidebar Layout
Complete a sticky sidebar layout in a care exhibition scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runCare notebook responsive gallery
Complete an adaptive gallery in a care notebook setting: including real content, interactive controls, clear state feedback, and cross-size layout.
Open and runCare Recap Bento-Style Grid Layout
Complete a Bento grid layout in the care recap page scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runClassroom Atlas Dashboard Shell
Complete the dashboard shell in a classroom atlas scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runClass Briefing Magazine Editorial Grid
Complete a magazine editorial grid in a classroom briefing scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runClass Handbook Full-Bleed Layout
A full-bleed interleaved layout completed for the classroom handbook scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runClassic Three-Column Layout for the Classroom Special Issue
Complete the classic three-column layout in a classroom special issue scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runResponsive Masonry Layout Class Guide
Complete a responsive masonry layout in a classroom guide scenario: includes real content, interactive controls, clear state feedback, and a responsive layout across sizes.
Open and runClassroom Display Master-Detail Content Layout
Complete a master-detail content layout in a classroom display setting: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runCourse guide split-screen narrative layout
Complete a split-screen narrative layout for a course guide scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runClass Notebook Sticky Sidebar Layout
Complete a sticky sidebar layout for a classroom notebook scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runAdaptive Gallery for the Class Recap Page
Complete an adaptive gallery in a class recap page scenario: include real content, interactive controls, clear status feedback, and cross-size layout.
Open and runClinic Brochure Bento Grid Layout
Complete a bento-style grid layout for a clinic brochure scenario: include real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runActivity Recap Dashboard Shell
Complete the dashboard shell in an event recap scenario: real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runField Guide Magazine Editorial Grid
Complete a magazine editorial grid in the Field Atlas scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runFull-Bleed Field Report Layout
Complete a full-bleed interleaved layout for a field report scenario: includes real content, actionable controls, clear status feedback, and responsive behavior across sizes.
Open and runClassic three-column fleet manual layout
Complete a classic three-column layout in a fleet manual scenario: include real content, actionable controls, clear status feedback, and responsive behavior across sizes.
Open and runGarden Atlas Responsive Masonry Layout
Complete a responsive masonry layout in a garden atlas scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runGarden Briefing Master-Detail Layout
Complete a master-detail content layout for a garden briefing scenario, including real content, actionable controls, clear state feedback, and cross-size layouts.
Open and runGarden Brochure Split-Screen Narrative Layout
Create a split-screen narrative layout in a garden brochure scene: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runGreenhouse Diary Sticky Sidebar Layout
Complete a sticky sidebar layout for the greenhouse diary scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runGarden Special Adaptive Gallery
Complete an adaptive gallery in a garden digest scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runGarden Guide Bento Grid Layout
Complete the bento-style grid layout for a garden guide scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runGarden Exhibition Dashboard Shell
Complete the dashboard shell in a garden exhibition scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runGarden Notebook Magazine Editorial Grid
Complete a magazine editorial grid in a garden notebook scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and run