.grid

This is documentation for the following classes:

These are for controlling the layout of content, not overall page layout.

Content layout grid

Multiple grids can be created using the grid grid layout.

Start by creating a container div with the class grid.

This container is a single column full-width container by default.
By adding grid--[max-h2|max-h3|max-h4|max-h5] to the container div, you can state the maximum number of items in the horizontal direction (the actual number depends on the size of screen and font).

grid--auto will do its best to handle things for you.

Child elements have the class grid__item. Elements added beyond the maximum for the row will wrap onto the next line. All elements stack below the small breakpoint.

You don't have to specify all the children.

grid can also be nested.

A grid can also be fixed so it won't collapse at smaller screen sizes with grid--fixed-grid.

An item can expand to fill available space.


Grid padding

In most cases, you'll want some padding around the grid.

Padding isn't added by default, but you can add it using classes on the row wrapper.

No padding

No padding
No padding

For default padding use grid--padding, grid--horizontal-padding or grid--vertical-padding

Default padding

Default padding
Default padding

For wide padding use grid--padding-wide, grid--horizontal-padding-wide or grid--vertical-padding-wide

Wide padding
Wide padding
Wide padding

Centre grid items

Add grid--center.

Centered grid item

Centered grid item

Centered grid item


The grid can contain any number of children. They will just wrap onto the next line.


Max four items with complex content

quia numquam tempore totam molestiae

omnis doloribus non aut voluptates sapiente debitis eum reiciendis suscipit ut odit totam voluptas tempore tempora exercitationem dignissimos nulla sed itaque recusandae provident amet sint deleniti molestiae quia ullam velit

adipisci delectus quasi rem omnis

aut quia dolores repudiandae illo debitis eius sit vel aliquam beatae exercitationem error qui delectus architecto numquam ut et fuga eos voluptas voluptatem est est porro impedit excepturi expedita beatae

nobis nisi quis voluptas quidem

non hic unde est rerum aut quae nihil eaque odio iusto voluptas blanditiis quibusdam vel nostrum facere ducimus quos dolores dolorem itaque placeat repudiandae maiores voluptatem est facilis dicta ducimus

earum cumque mollitia quia exercitationem

facilis qui ut culpa facere numquam accusamus autem doloribus velit perspiciatis placeat quasi laborum quia ut qui incidunt aspernatur odio consequatur qui neque eos minus molestiae eum voluptates doloremque aut

grid--auto

This allows the content to dictate the size of the .grid__items.

quis sed facere eveniet magni

quisquam ratione quasi repellendus velit dolores sint qui dolorem

minima ex qui

magnam natus

laborum eos ratione

unde quae

odit

ipsam doloribus facere qui sit quod quia autem quis nam

in fuga earum repellendus aut pariatur ut

officiis at asperiores qui velit molestiae molestias qui explicabo

It can be combined with .grid--max-h5, etc, to limit the number of potential columns.

maxime fugiat

dolores rem placeat voluptatum

enim assumenda molestias voluptatem exercitationem id

pariatur molestiae voluptates magni labore architecto est dolores

hic voluptatem et consequatur fugiat est impedit aliquam laudantium magni

rem pariatur

dolor quasi

laborum velit

aut repudiandae

consequatur incidunt

velit est voluptate

exercitationem tempore doloribus explicabo ex non et quisquam aut ut et sit dolores provident quia non sit voluptatem et voluptates vel dolorem dolorem modi voluptate rem quibusdam illo molestias fugit

enim molestiae nostrum

et et quisquam quis non non autem illum velit et recusandae fuga voluptatem excepturi sed omnis et enim quia voluptates qui iste vel quisquam nulla expedita dignissimos sunt tempore temporibus

inventore fuga odit

eos nobis labore quos ex eum dolores accusantium possimus tenetur similique placeat perferendis eos autem numquam ullam quam autem sit neque qui dolor blanditiis repellat magni et quod consequuntur hic

consequatur nisi dolorem

in quo consequatur in animi aut ut ratione doloribus est aspernatur sit sed saepe eos non placeat harum molestias qui sint facilis omnis blanditiis et dignissimos velit ducimus iste repellat

veniam adipisci illo

dolore illo et enim quisquam blanditiis dolor deserunt non dolores totam ex voluptas natus omnis rerum accusantium sit ut laborum voluptatem perferendis similique deleniti nostrum repudiandae qui minus cupiditate harum

officiis et unde

et quam et quas voluptatem aspernatur provident porro voluptates ullam ut hic in velit accusantium quis sit aut ut at dolor maiores fugit quaerat omnis architecto magni animi perspiciatis voluptas

consequatur qui quia

eum repellendus quisquam ea perspiciatis iusto labore voluptas enim et aut est fugiat similique sit omnis aut excepturi aut voluptates architecto dolores et ratione et error dolores enim et assumenda

consequatur quia maxime

doloremque quam et eius quae ea nostrum aut aut in reiciendis voluptate provident reiciendis molestiae tempora qui numquam explicabo perspiciatis aut qui quos ut et laborum doloribus labore dicta illo

impedit officia natus

tempora assumenda sed aut aut voluptas sunt reiciendis commodi aspernatur et ut ratione atque ducimus et quia enim perferendis quo ut ea qui possimus omnis a ipsam totam voluptate et

sit consequuntur molestias

voluptas rerum sed est non fugiat accusamus occaecati sequi pariatur expedita quod provident reprehenderit aut qui omnis voluptas voluptatem tenetur doloribus alias dolorem reiciendis et porro repellat doloremque recusandae eligendi

Back to top

grid__item modifiers

Nisi asperiores saepe vel perspiciatis

Consectetur voluptatem officiis at ipsum. velit ut omnis qui tempore voluptatem similique ut ut ut. vel sunt suscipit velit possimus nulla voluptatibus. error voluptatem quaerat omnis et id. voluptatum amet eos et quia voluptas impedit iste quod tempora expedita ut. eum omnis facere praesentium dolorem

Voluptate nesciunt temporibus voluptatum impedit molestiae culpa sed quod eum. repudiandae exercitationem optio quia magni amet et deleniti non enim repellat non hic explicabo explicabo. perspiciatis fugit molestias quibusdam fuga sint cupiditate eos quibusdam non necessitatibus

Non rerum in non enim dolorum doloribus est. maxime dolor id alias adipisci voluptatum est mollitia voluptates. quia nulla et est odit sit quis est. sit perspiciatis distinctio accusamus maiores sunt aut consequatur et vitae qui consequatur hic praesentium. quia aut quam ea rem nihil culpa at recusandae delectus dolorem esse eius. unde maiores ab maiores debitis modi exercitationem consequatur soluta qui eaque at et vel ab

Omnis excepturi sit suscipit ut laboriosam vero quam consequatur natus veniam veniam. atque sed tenetur iure. quod ipsa laborum quod laudantium sed corporis asperiores. autem tempora dignissimos quibusdam nostrum consequatur cumque. iure aut rerum quisquam tempora qui et animi labore tempora eaque consequatur nihil excepturi

Qui tempore ut quae voluptates accusantium. recusandae provident iusto aut et. maiores quae consequatur totam error neque aperiam vitae molestiae maiores ad repudiandae. omnis aut optio veniam et quia error eligendi ab saepe saepe voluptatem ut

Nemo temporibus dolorum molestias et quo et molestias et magnam

Dolor consequatur quam non deserunt neque. sapiente aut voluptatum eligendi voluptate pariatur consequatur vel dolores ea doloribus. ea inventore cum praesentium iste est aut adipisci ad aut neque repellat nihil at nemo

Consequuntur possimus sequi nulla. quo eveniet doloribus necessitatibus veritatis ipsum provident facere laboriosam eos labore magni aut est. ut sit in natus quos qui eligendi voluptatem. voluptatum est sunt et rerum non magni sunt sit vel itaque et

Sunt sed explicabo qui quo quisquam et cum soluta. omnis deleniti tempore non dolores. qui voluptatem sequi ea natus deserunt fugit id praesentium numquam soluta accusantium rerum consequuntur eaque. ratione maxime quis quasi. dolorem illum provident rerum pariatur odio sapiente maiores quas aliquam

Facere delectus perspiciatis dicta tenetur. numquam facilis rerum esse facere delectus aut fugit nulla sapiente placeat aut dolore eos. eius minima quis adipisci est assumenda ipsa sit consequuntur libero in. dolor fuga excepturi voluptas animi ducimus eos saepe eum et odio corrupti quo. est culpa pariatur beatae dolores doloribus

Eos eius consequatur qui vel accusantium alias neque assumenda architecto nihil eaque quis pariatur enim. est quis sequi esse voluptas quod sequi aut. recusandae sit voluptas non quo aut accusamus. quia esse veniam mollitia corrupti quo est repellat provident laboriosam dignissimos dolores minus deserunt. et occaecati assumenda velit excepturi ea nobis fugiat adipisci et. officiis molestiae beatae quibusdam molestiae saepe