Grid layout is best used for laying out content in columns and rows. Like flex, grid requires that the elements be inside a container (usually a <div>). In the container, add class="grid". To adjust the layout you can also add other class attributes within this class, based on what you need. See Options box.
Within LibGuides it's especially helpful when you want two or more different column setups on the same page.
| Attribute | Grid Items Will: |
|---|---|
| grid (required) | |
| columns-2-even | display as 2 even-width columns; make subsequent rows top-align |
| columns-3-even | display as 3 even-width columns; make subsequent rows top-align |
| item-margin-2 | add a 2rem gap between rows and columns |
| item-margin-3 | add a 3rem gap between rows and columns |
| item-padding-1 | Provide 1rem of padding inside the grid items |
| item-padding-2 | Provide 2rem of padding inside the grid items |
| item-padding-3 | Provide 3rem of padding inside the grid items |