CSS Grid Quick Tips

README.md

CSS Grid Quick Tips

This are some pointers on basic grid usage. For more details, please see css-tricks grid guide

• Code Examples are derived from this github repo
  • there is also some useful examples for setting background images on the gallery.html page

How to set up grid

1. add display: grid; in your css to the class or element that you want to be a grid container
2. set up your column layout using grid-template-columns: ;
   • define your columns
     • set columns explicitly like 1fr 1fr 1fr
     • use repeat syntax like repeat(3, 1fr)
     • use flexible values for grid columns with minmax() like repeat(3, minmax(200px, 1fr))
3. Add gap to your grid if you want
4. adjust item positioning
   • justify-items for horizontal position
     • note that this is different from justify-content, depending on what you're doing, you may need one or the other or both.
     • justify-content is better for adjusting the position of a group of items
     • justify-items is better for adjusting the position of items more directly
   • align-items for vertical position
   • NOTE unlike flexbox, you can use start and end without a prefix (ie: flex-end)
5. make tweaks to your grid layout

Useful Syntax

• to make a grid item span all of the grid columns, you can add this syntax to it

.grid-item {
  grid-column: 1 / -1;
}

• This syntax is a shorthand for grid-column-start and grid-column-end
• the / separate the two values
• you can use this to explicitly set 1 grid item to a particular location

Flexible and Responsive Grids

• You can also set grid up to auto generate new columns and reduce columns depending on the available space
• To make a responsive grid layout, you have a few options.

1. less nesting
   • grid on the whole container
   • benefits: less html, use the grid for more top level layout
   • downsides: can be tricker to manage if there is a lot more content

<section class="grid auto-fit">
  <header class="full-width">
    <h2>Title Text</h2>
  </header>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</section>

2. more nesting
   • grid on just the grid items
   • benefits: more control options
   • downsides: more css rules applied

<section>
  <header class="full-width">
    <h2>Title Text</h2>
  </header>
  <div class="grid auto-fit">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</section>

• In both of these examples. the css would look something like this:

.grid {
  display: grid;
}
.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Extra notes

• if the header is inside the grid, you will need to set the grid-column: 1 / -1; for it to override
  • this is useful for setting up a full page level design layout using grid
• you will also need to use justify-content: center; to position your grid group to the center
• if you need to position the grid items content within it's grid space, use justify-items

auto-fit vs auto-fill

• read this for more information
• auto-fit will focus on filling the available space with actual content
  • it will only create extra spaces if there is content to fill it
• auto-fill will focus on filling the available space regardless of content
  • ie: if there is more space then content needs, it'll keep creating empty grids