.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
For default padding use grid--padding
, grid--horizontal-padding
or grid--vertical-padding
Default padding
For wide padding use grid--padding-wide
, grid--horizontal-padding-wide
or grid--vertical-padding-wide
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__item
s.
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
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