Grid Utilites

.fizz-grid

Use .fizz-grid to arrange a number of child elements into a grid that automatically adjusts the number of items per row based on the --col-min-width and --col-max-width.

The grid will hold as many items as possible, wrapping the items in the grid to a new row as needed. Once the items reach the minimum size, each row will contain one fewer column to accomodate the smaller space.

By default these properties are set to the same value, but you can override them both depending on the context of your use case by setting them in the style attribute of the .fizz-grid.

Custom Property	Default Value	Description
`--grid-col-min`	135px	The minimum width of cards on small screens
`--grid-col-max`	135px	The minimum width of cards on large screens
`--align-items`	normal	The vertical alignment of items with unequal heights [MDN]

To create space with grid classes the gap utility classes can also be used if other space is needed.

HTML

<div class="fizz-grid"
     style="--grid-col-min: 160px; --grid-col-max: 200px;">
  <figure class="fizz-bordered">
    <img src="https://picsum.photos/600/400"
         alt="">
    <figcaption class="fizz-inset-square-16">
      <p class="fizz-heading-3">Card Title</p>
    </figcaption>
  </figure>
  ...
  <figure class="fizz-bordered">
    <img src="https://picsum.photos/600/400"
         alt="">
    <figcaption class="fizz-inset-square-16">
      <p class="fizz-heading-3">Card Title</p>
    </figcaption>
  </figure>
</div>

.fizz-grid-trio

Specifically used at the top of product cards to optionally show one or more status indicators in a specific slot. Place the item(s) in a .fizz-grid-trio container and then apply a data-grid-area attribute to position them in the grid.

**Sufferfest Beer FKT**

Chicago Beverage Systems

HTML

<div class="fizz-grid-trio">
  <div class="fizz-badge-icon"
       data-grid-area="left">
    <svg>...</svg>
    <span>Deal</span>
  </div>
  <p class="fizz-text-subdued fizz-text-small"
     data-grid-area="center">Sponsored</p>
  <span class="fizz-badge"
        data-grid-area="right">Craft</span>
</div>

Center Horizontally and Vertically

You can use .fizz-grid-center to center content both horizontally and vertically within a container.

Send a message about substitutions, delivery day confirmation, or just a friendly hello.

HTML

<div class="fizz-card fizz-bordered fizz-inset-square-16 fizz-grid-center"
     style="min-height: 144px;">
  <p class="fizz-text-subdued fizz-text-small fizz-text-center">Send a message about substitutions, delivery day
    confirmation, or just a friendly hello.</p>
</div>