Grid

.grid puts its children in equal columns. Below 768px the children stack in one column. From 768px up it uses repeat(auto-fit, minmax(0%, 1fr)), so the columns share the row equally, however many children there are.

<style>
  .grid > div {
    padding: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--pico-primary-background) 35%, transparent);
    border-radius: var(--pico-border-radius);
    background: color-mix(in oklab, var(--pico-primary-background) 10%, transparent);
    text-align: center;
  }
</style>
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Mixed content#

Any element can be a grid child: inputs, buttons, articles.

<form>
  <div class="grid">
    <input type="text" name="firstname" placeholder="First name" aria-label="First name" required />
    <input type="email" name="email" placeholder="Email" aria-label="Email" required />
    <button type="submit">Subscribe</button>
  </div>
</form>

Limits#

The grid is intentionally small. There are no column spans, offsets or per-breakpoint classes, and all columns are equal. For anything else, write CSS grid or flexbox in your own stylesheet. You can reuse the gap variables:

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
}

Children get min-width: 0, so long content shrinks instead of overflowing the column. A wide table or code block inside a cell needs Overflow auto.

Customization#

--pico-grid-column-gap

var(--pico-spacing)

Gap between columns.

--pico-grid-row-gap

var(--pico-spacing)

Gap between rows.

.grid stays global in the conditional build, so it works inside and outside a .pico scope.