Document

Introduction

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Note: If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

Media objects

The Media Object is a pattern we see all over the web. Named by Nicole Sullivan it refers to a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.

Requirements

Stacked on Mobile, two columns on Desktop.
The image can be on the left or right.
The image might be small or large.
Media Objects can be nested.
The Media Object should clear the contents no matter which side is tallest.

CSS


            @media (min-width: 500px) {
            .media {

            display: grid;
            grid-template-columns: fit-content(200px) 1fr;
            grid-template-rows:1fr auto;
            grid-template-areas:
            "image content"
            "image footer";
            grid-gap: 20px;
            margin-bottom: 4em;
            }

            .media-flip {
            grid-template-columns: 1fr fit-content(250px);
            grid-template-areas:
            "content image"
            "footer image";
            }

            .media > .media {
            grid-column-start: 2;
            }

            .media-flip > .media {
            grid-column-start: 1;
            }

            .img {
            grid-area: image;
            }

            .content {
            grid-area: content;
            }

            .footer {
            grid-area: footer;
            }

            }

HTML

<div class="media"> <div class="img"> <img src="balloon-sq2.jpg" alt="Balloons"> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"> An optional footer goes here. </div> </div> <div class="media"> <div class="img"> <img src="sharp-account_box-24px.svg" width="80px" alt="Account"> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"></div> </div> <div class="media media-flip"> <div class="img"> <img src="balloon-sq2.jpg" alt="Balloons"> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"> An optional footer goes here. </div> </div> <div class="media"> <a class="img"> <img src="balloon-sq2.jpg" alt="Balloons"> </a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"></div> <div class="media"> <a class="img"> <img src="balloon-sq2.jpg" alt="Balloons"> </a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"></div> </div> </div>

Columns

You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Grid, Flexbox or Multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.

Requirements

A continuous thread of content broken up into newspaper-style columns.
A single row of items arranged as columns, with all heights being equal.
Multiple rows of columns lined up by row and column.

CSS


          .container {
          column-width: 10em;
          column-rule: 1px solid rgb(75, 70, 74);
          }

HTML

<div class="container"> <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p> <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach.</p> </div>

Center an element

Requirements

To place an item into the center of another box horizontally and vertically.

CSS


          .container {
          height: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          }

          .item {
          width: 10em;
          }

HTML

<code> <div class="container"> <div class="item">I am centered!</div> </div> </code>

Sticky footers

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height. We'll look at a couple of techniques for creating one in this recipe.

Requirements

Footer sticks to the bottom of the viewport when content is short.
If the content of the page extends past the viewport bottom, the footer then sits below the content as normal.

CSS


          .wrapper {
          min-height: 100%;
          display: grid;
          grid-template-rows: auto 1fr auto;
          }

HTML

<code> <div class="wrapper"> <header class="page-header">This is the header</header> <article class="page-body"> <p>Main page content here, add more if you want to see the footer push down.</p> </article> <footer class="page-footer">Sticky footer</footer> </div> </code>

Split navigation

A common navigation pattern is to have one element pushed away from the others. We can use Flexbox to achieve this, without needing to make the two sets of items into two separate flex containers.

Requirements

A common navigation pattern is to have one element pushed away from the others. We can use Flexbox to achieve this, without needing to make the two sets of items into two separate flex containers.

CSS


          .main-nav {
          display: flex;
          }

          .push {
          margin-left: auto;
          }

HTML

<code> <nav> <ul class="main-nav"> <li><a href="">About</a></li> <li><a href="">Products</a></li> <li><a href="">Our Team</a></li> <li class="push"><a href="">Contact</a></li> </ul> </nav> </code>

Breadcrumb navigation

Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.

Requirements

The items typically display inline with a separator to indicate a hierarchy between individual pages.

CSS


          .breadcrumb ul {
          display: flex;
          }

          .breadcrumb li::before {
          content: "→";
          }

          .breadcrumb li:first-child::before {
          content: "";
          }

HTML

<code> <nav aria-label="Breadcrumb" class="breadcrumb"> <ul> <li><a href="">Home</a></li> <li><a href="">Category</a></li> <li><a href="">Sub-Category</a></li> <li><span aria-current="page">Product</span></li> </ul> </nav> </code>

List group with badges

In this recipe we will create a list group pattern with badges that indicate a count.

Requirements

Our list items should be displayed with the badges lined up on the right, no matter how much content the item has. The badge should always be centered vertically whether there is a single line of content, or more than one.

CSS


          .list-group li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          }

HTML

<code> <ul class="list-group"> <li>Item One <span class="badge">2</span> </li> <li>Item Two <span class="badge">10</span> </li> <li>Item Three <span class="badge">9</span> </li> <li>Item Four <span class="badge">0</span> </li> </ul> </code>

Pagination

This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such as search results.

Requirements

The pagination pattern typically displays items in a row. To ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list inside a
element, and then use CSS to display the layout visually as a row.

CSS


          nav {
          display: flex;
          justify-content: center;
          }

          .pagination {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          }

          .pagination li {
          margin: 0 1px;
          }

HTML

<code> <nav aria-label="pagination"> <ul class="pagination"> <li><a href=""><span aria-hidden="true">«</span><span class="visuallyhidden">previous set of pages</span></a></li> <li><a href=""><span class="visuallyhidden">page </span>1</a></li> <li><a href="" aria-current="page"><span class="visuallyhidden">page </span>2</a></li> <li><a href=""><span class="visuallyhidden">page </span>3</a></li> <li><a href=""><span class="visuallyhidden">page </span>4</a></li> <li><a href=""><span class="visuallyhidden">next set of pages</span><span aria-hidden="true">»</span></a></li> </ul> </nav> </code>

Card

This pattern is a list of "card" components with optional footers.

Requirements

The card component can contain a variety of content, including a heading, image, content and a footer.
Each card should be the same height, and footers should stick to the bottom of the card.
When added to a collection of cards, the cards should line up in two dimensions.

CSS


          .cards {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
          grid-gap: 20px;
          }

          .card {
          display: grid;
          grid-template-rows: max-content 200px 1fr;
          }

          .card img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          }

HTML

<code> <div class="cards"> <article class="card"> <header> <h2>A short heading</h2> </header> <img src="balloons.jpg" alt="Hot air balloons"> <div class="content"> <p> The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago. </p> </div> </article> <article class="card"> <header> <h2>A short heading</h2> </header> <img src="balloons2.jpg" alt="Hot air balloons"> <div class="content"> <p>Short content.</p> </div> <footer>I have a footer!</footer> </article> <article class="card"> <header> <h2>A longer heading in this card</h2> </header> <img src="balloons.jpg" alt="Hot air balloons"> <div class="content"> <p>In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a suggestion for reaching the North Pole by an aerostat.</p> </div> <footer>I have a footer!</footer> </article> <article class="card"> <header> <h2>A short heading</h2> </header> <img src="balloons2.jpg" alt="Hot air balloons"> <div class="content"> <p> The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago. </p> </div> </article> </div> </code>

Grid wrapper

The grid wrapper pattern is useful for aligning grid content within a central wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired.

Requirements

Items placed on the grid should be able to align to a horizontally-centered max-width wrapper and/or the outer edges of the grid.

CSS


          .grid {
          display: grid;
          grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(20px, 1fr);
          grid-gap: 10px;
          }

          .full-width {
          grid-column: 1 / -1;
          }

          .wrapper {
          grid-column: 2 / -2;
          }

          .left-edge {
          grid-column: 1 / -2;
          }

          .right-wrapper {
          grid-column: 4 / -2;
          }

HTML

<div class="grid"> <div class="wrapper"> <p>This item aligns to a central “wrapper” – columns that have a maximum width.</p> </div> <div class="full-width"> <p>This item aligns to the edge of the grid container.</p> </div> <div class="left-edge"> <p>This item aligns to the left edge of the grid container and the right edge of the wrapper.</p> </div> <div class="right-wrapper"> <p>This item aligns to the right edge of the “wrapper” columns.</p> </div> </div>

Reference

All the documentation is taken from MDN