Robert Birming

Grid styles

A grid layout for lists. Handy for link collections, libraries, and other things you want to arrange neatly.1

Preview

How to use

Wrap a normal list inside a .grid container.

Markup

<div class="grid">

- [One](#)
- [Two](#)
- [Three](#)

</div>

Styles

/* Grid | robertbirming.com */
.grid > ul {
  list-style: none;
  margin-block: var(--space-block);
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .grid > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 45rem) {
  .grid > ul {
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  }
}

.grid li {
  margin: 0;
}

.grid a {
  display: block;
  padding: 0.8em 0.9em;
  line-height: 1.35;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}

.grid a:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--link) 45%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}

@media (hover: hover) {
  .grid a:hover {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--border) 60%, var(--text));
  }
}

Want more? Check out the Bear library.

Happy listing!

  1. This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩