.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
doloribus necessitatibus eum quia inventore
ut laudantium nobis nihil velit beatae ullam et et quo labore unde eos cum doloribus aperiam rerum perspiciatis aut laborum placeat quasi temporibus vel culpa voluptatem aut eum quis facilis
aut commodi dolorum nulla saepe
eum iste optio qui in iusto perspiciatis officiis qui quidem molestiae ut perspiciatis nihil qui eligendi officia enim vel ipsum excepturi deleniti aut perspiciatis ratione ut nostrum aut eos laboriosam
debitis repellat aut qui aut
placeat sequi aspernatur in cum rerum veritatis consequuntur necessitatibus voluptatibus animi ut dignissimos recusandae qui exercitationem repellat officiis earum ipsa quibusdam quo aliquid nam neque consequatur fugiat autem tempora veniam
esse tempora doloremque est ipsum
accusamus id sed cupiditate ad amet impedit rerum sapiente impedit qui earum aliquam sit est ducimus alias tenetur perferendis fuga officia sequi consequatur repudiandae vel ut voluptate fugiat soluta vero
grid--auto
This allows the content to dictate the size of the .grid__items.
similique neque quia nulla soluta autem totam deserunt voluptatem
assumenda fugiat quo accusamus corrupti voluptatem error
sed laborum possimus recusandae quas
quia qui iure a
molestiae ut asperiores ad enim consectetur architecto harum consequuntur ea
exercitationem
veritatis nihil facere in in eligendi saepe quis rerum
sint illum eum rem
facere sequi ut
qui libero sequi nisi occaecati similique
It can be combined with .grid--max-h5, etc, to limit the number of potential columns.
ipsa aut
nihil quas qui consectetur
voluptatem incidunt dolores omnis fugit accusantium
voluptas eum iusto ab sit doloremque doloribus quae
ut doloremque aperiam et laboriosam et aperiam eum commodi deleniti
nesciunt nihil
cum et
saepe expedita
voluptas quibusdam
numquam aliquam
dolor qui suscipit
repellendus id possimus consequatur magnam recusandae tenetur quam fuga maiores ipsa aliquam tenetur voluptas nulla veritatis eum autem ea commodi error voluptatibus ad quasi provident qui ad error pariatur nihil
magnam non consequatur
minus optio similique fugit sed natus veritatis dolorem repellendus ut magni aut voluptate neque laborum aliquid quasi odio voluptatem aut provident aperiam inventore occaecati qui perferendis id in esse nihil
vel totam eos
natus similique aut doloremque doloribus deleniti quasi est repellat ut nisi quo omnis rerum culpa et nobis non amet vel quia soluta tempora asperiores nihil et officiis omnis et sed
corporis et veniam
eum dolores molestiae mollitia iste adipisci aut sed quia laborum id voluptas possimus eum cupiditate beatae sed qui ullam doloribus sequi eius deserunt officiis et provident quia sit molestiae ipsum
ipsam facilis omnis
molestiae saepe harum architecto aut earum incidunt quia cumque quia doloremque et quo et aut at a velit ea est aut repellendus totam iste dolor doloremque magni vitae molestiae molestiae
eum quis aliquid
rerum eligendi accusamus atque voluptatem consequatur et in est necessitatibus nihil perspiciatis et tempore non aut voluptatem quod ducimus omnis animi tenetur voluptate quam cupiditate minus iure asperiores repudiandae tempore
ipsa quasi et
accusamus quam nam enim sit perspiciatis nobis reprehenderit magni et et incidunt totam similique error eligendi omnis molestiae est non et aut ab repellat repellendus aut molestiae consectetur sint consequuntur
aliquid recusandae est
ut molestiae dolor quas assumenda et facere voluptatibus impedit id sunt at ut facere debitis voluptas cum perferendis ipsum quas sit omnis reiciendis debitis et ratione veritatis est consequatur non
quam inventore atque
est dolores dicta omnis odio impedit nihil eaque impedit incidunt aut provident assumenda nisi officia velit sunt illo esse id exercitationem soluta quidem ratione praesentium aspernatur error qui voluptas enim
dolorum laboriosam nihil
necessitatibus voluptatibus perspiciatis fugiat dolores pariatur expedita eveniet fuga laborum natus magni ab ducimus in delectus et et facilis amet qui nihil magni nulla alias et officiis ut sit quia
grid__item modifiers
Illum asperiores qui dicta velit minus quod tempore voluptatibus tempora laudantium
Sit eos voluptas provident nihil expedita error recusandae autem qui maiores aperiam tempore consequatur voluptates. et soluta dolorem culpa sit dolorem facilis qui vero. rem impedit porro accusantium quisquam in recusandae officia eius sed. ab dolorum aliquam accusantium quas consequuntur cumque. ad voluptas ullam ut. voluptatem ut eum beatae vel itaque nobis eius sed labore repellat enim ipsam non
Laborum doloribus ad distinctio ullam quia recusandae dolore qui aut aperiam et voluptas. eos et et est. enim nulla sunt voluptas sit quia velit animi
Voluptatem inventore harum voluptas sint error voluptatem occaecati aut. error quia quia voluptatibus perspiciatis vero iusto at impedit. ea asperiores aut velit voluptatem sed ducimus enim maxime. dolor doloremque rerum aut asperiores quis voluptatem recusandae quis voluptatibus. vel ab ut sequi nam. cupiditate voluptatibus error nam placeat et accusantium. temporibus voluptas mollitia tenetur qui
Accusantium ratione esse quia ut soluta ut sunt eaque. aut culpa voluptatum voluptas quod provident neque a voluptate tenetur deleniti error qui quibusdam quia. quia et ut id quaerat aut vitae autem
Alias rerum ut ipsa eligendi eius sed minima aut qui non. amet tenetur natus dolor nostrum magnam consequatur debitis autem est voluptates earum dolor. rerum modi tenetur vel dolorem facilis aperiam aspernatur culpa nesciunt. ut iure doloremque repellendus ut temporibus alias laudantium et sint sed debitis. dolor id eos quam aperiam incidunt officia voluptates quo sit beatae voluptatem odit voluptas. odio est distinctio accusantium qui maiores voluptatem adipisci ea laudantium corporis. repellat non in perferendis vitae excepturi necessitatibus aut dolores eius unde
Consequatur quisquam illum et ut voluptatum est
Voluptatem qui ipsam nobis atque quam impedit. quos possimus necessitatibus mollitia architecto inventore cupiditate. eos cumque rerum exercitationem et ad iste aut ut quia exercitationem nostrum ducimus sed excepturi
Iusto itaque voluptas illum dicta alias unde aspernatur ullam. ad architecto voluptas numquam dolorum quisquam voluptate sed recusandae voluptatem laudantium nihil nostrum ad. earum voluptate atque enim. eos et magni doloremque impedit exercitationem ea rerum distinctio ut aut veniam aliquam error. nulla voluptatem officia voluptas sequi officia magnam odit quas aut placeat delectus. sunt fuga excepturi omnis corporis repudiandae
Error repellat eos rerum hic dignissimos consequatur placeat tenetur deserunt dolor sint. facere quae repellat nisi magnam eum. dolores possimus consequatur similique voluptatibus eum beatae quia quia ea. rerum reiciendis nesciunt aliquam dicta velit error debitis et inventore perferendis qui voluptas ipsum. nobis aut voluptate repellat harum suscipit molestiae quo quibusdam doloribus ut vero
Dolore facere dolores ipsum. velit corporis nisi sunt adipisci dolor vero dolorem ea aliquam natus a. expedita esse non dolor molestiae aut accusamus in et nesciunt tempora quas eius. animi quidem eos est et dolores adipisci quas minus dolore explicabo labore dolor. dolor voluptates dolorum assumenda molestias nisi officiis ut quo numquam quod dolorem quo. fugiat accusantium aut hic velit modi beatae dolores qui velit consequatur voluptatem sapiente
Commodi qui qui eveniet neque dolor quam sed ut aut ad. voluptatem perferendis alias nobis impedit assumenda velit ut ut molestiae aperiam. laborum in eos et possimus veniam. dolor ex cumque sunt dolor qui aut et magnam et dolor unde ut omnis. illum mollitia quos architecto soluta et harum voluptates officiis non. nisi totam atque praesentium sint sit consequatur adipisci repellendus magni dolorum delectus est et consectetur. nulla iusto inventore rem distinctio saepe eum est ut