Layout patterns
A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS grid and flexbox to help you achieve common UI patterns such as cards, dynamic grid areas, and full-page layouts, and are supported on all modern browsers.
This collection also includes some experimental patterns that use container queries. These patterns are denoted by a yellow warning icon (⚠️), and are not currently supported in stable browsers.
div class="parent"> div class="card"> h1>Video Title</h1> div class="visual"></div> p>Descriptive Text goes here</p> </div> </div>.parent display: grid; place-items: center; > .visual aspect-ratio: 16 / 9; > .card width: 50%; display: flex; flex-direction: column; padding: 1rem; >Maintains the aspect ratio of an image in a card, while letting you resize the card.
article class="autobot"> h1>Autobot</h1> </article>.autobot display: flex; > .autobot > * margin: auto; >A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only.
See the full article for many more details about this technique and when it’s efficient.
div class="parent"> div class="card"> h1>Title Here</h1> div class="visual"></div> p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p> </div> </div>.parent display: grid; place-items: center; > .card width: clamp(23ch, 60%, 46ch); display: flex; flex-direction: column; padding: 1rem; > .visual height: 125px; width: 100%; >Sets an absolute min and max size, and an actual size for the card.
div class="container"> div class="card"> div class="visual"></div> div> div class="meta"> h1>Card Title Here</h1> h2 class="time">Subtitle</h2> </div> p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p> button>I'm a button</button> </div> </div> </div>/* Set containment on parent */ .container container: inline-size; width: 100%; max-width: 750px; margin: 0 auto; > /* Base Styles */ .visual aspect-ratio: 1 / 1; > .desc display: none; > .card text-align: center; padding: 0.5rem; > /* Responsive styles */ /* 2-column grid layout at >=350px */ @container (min-width: 350px) .card display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 1rem; text-align: left; > > /* Display description at >=500px */ @container (min-width: 500px) .desc display: block; > > Card that owns its independent style logic and is styled based on its parent’s inline width.
article class="content-center"> h1>Content Center</h1> </article>.content-center display: grid; place-content: center; gap: 1ch; >A centering technique that is only a few lines of CSS, works great for many elements, but has the side effect of making children match the width of the widest element.
See the full article for many more details about this technique and when it’s efficient.
div class="parent"> div class="box">1</div> div class="box">2</div> div class="box">3</div> </div>.parent display: flex; flex-wrap: wrap; justify-content: center; > .box /* Stretching: */ flex: 1 1 150px; margin: 5px; background: red; gap: 1rem; >Create a layout that stretches to fit the space, and snaps to the next line at a minimum size.
article> h1 class="fluffy-center">Fluffy Center</h1> </article>.fluffy-center padding: 15vmin; /* any large amount of padding works */ >A centering technique that puts the content in the center via equal padding around all its sides.
See the full article for many more details about this technique and when it’s efficient.
article class="gentle-flex"> h1>Gentle Flex</h1> </article>.gentle-flex display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1ch; >A centering technique that only aligns content and doesn’t change their size during the process.
See the full article for many more details about this technique and when it’s efficient.
div class="parent"> header class="section coral">Header</header> div class="left-side section blue">Left Sidebar</div> main class="section green"> Main Content</main> div class="right-side section yellow">Right Sidebar</div> footer class="section coral">Footer</footer> </div>.parent display: grid; grid-template: auto 1fr auto / auto 1fr auto; > header padding: 2rem; grid-column: 1 / 4; > .left-side grid-column: 1 / 2; > main grid-column: 2 / 3; > .right-side grid-column: 3 / 4; > footer grid-column: 1 / 4; >Classic layout with a header, footer, and two sidebars flanking a main content area.
div class="container"> div class="card"> h3>Title - Card 1</h3> p contenteditable>Medium length description with a few more words here.</p> div class="visual"></div> </div> div class="card"> h3>Title - Card 2</h3> p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p> div class="visual"></div> </div> div class="card"> h3>Title - Card 3</h3> p contenteditable>Short Description.</p> div class="visual"></div> </div> </div>.container display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); > .visual height: 100px; width: 100%; > .card display: flex; flex-direction: column; padding: 1rem; justify-content: space-between; > h3 margin: 0 >A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.
div class="parent"> header class="section yellow">Header</header> main class="section blue">Main</main> footer class="section green">Footer Content</footer> </div>.parent display: grid; grid-template-rows: auto 1fr auto; /* Just for parent demo size */ height: 100vh; >Commonly referred to as a sticky footer, this layout is often used for both websites and apps.
article> h1 class="pop-n-plop">Pop n' Plop</h1> </article>article position: relative; > .pop-n-plop position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >A centering technique for overlaying other content.
See the full article for many more details about this technique and when it’s efficient.
div class="parent white"> div class="box">1</div> div class="box">2</div> div class="box">3</div> div class="box">4</div> </div> .parent display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); >A responsive layout with automatically-placed and flexible children.
div class="parent"> div class="section yellow" contenteditable> Min: 100px / Max: 25% </div> div class="section blue" contenteditable> This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space. </div> </div>.parent display: grid; grid-template-columns: minmax(100px, 25%) 1fr; >A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.
div class="parent"> div class="box" contenteditable=""> :) </div> </div>.parent display: grid; place-items: center; /* Just for parent demo size */ height: 100vh; >Centering a child div in one line of code
div class="parent"> div class="span-12 section coral">Span 12</div> div class="span-6 section green">Span 6</div> div class="span-4 section yellow">Span 4</div> div class="span-2 section blue">Span 2</div> </div> .parent display: grid; grid-template-columns: repeat(12, 1fr); > .span-12 grid-column: 1 / span 12; > .span-6 grid-column: 1 / span 6; > .span-4 grid-column: 4 / span 4; > .span-2 grid-column: 3 / span 2; > /* centering text */ .section display: grid; place-items: center; text-align: center >A grid broken up into 12 segments where you can place areas onto the tracks evenly.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.
HTML Layout Elements and Techniques
Websites often display content in multiple columns (like a magazine or a newspaper).
Example
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
— Defines a set of navigation links
— Defines a section in a document
— Defines an independent, self-contained content
— Defines content aside from the content (like a sidebar)
— Defines a footer for a document or a section
— Defines additional details that the user can open and close on demand
— Defines a heading for the element
- — Defines a header for a document or a section
- — Defines a set of navigation links
- — Defines a section in a document
- — Defines an independent, self-contained content
- — Defines content aside from the content (like a sidebar)
- — Defines a footer for a document or a section
- — Defines additional details that the user can open and close on demand
- — Defines a heading for the element
You can read more about semantic elements in our HTML Semantics chapter.
HTML Layout Techniques
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
CSS Frameworks
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is easy to learn — you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
Example
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Learn more about flexbox in our CSS Flexbox chapter.
Example
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Learn more about CSS grids in our CSS Grid Intro chapter.