Grid

Columns that fit the width: each has a minimum width and, below it, wraps. It never goes past the screen.

On this page

Playground

12345

Space (gap)

Narrowest column

Pieces

Background

HTML

<div class="feitio-grid" data-gap="1" style="--feitio-grid-min: 6rem"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span><span class="lay-box">4</span><span class="lay-box">5</span></div>

When to use

Whenever there is space between pieces: space belongs to the parent, and only a step of the scale.

When not to use

For a component’s inner padding: it comes ready.
With a hand-written margin alongside: never; the check fails it.

Examples

Piece 1Piece 2Piece 3Piece 4Piece 5Piece 6

Grid

Six pieces of at least 9rem, at space-3.

Show code

HTML

<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>

React

<Grid gap={3} min="9rem">
  …
</Grid>

12345678

1234

Another narrowest column

With --feitio-grid-min: 6rem more columns fit; with 15rem, fewer. The number of columns comes from the width, never from a fixed number.

Show code

HTML

<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 6rem">…</div>
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 15rem">…</div>

12empty345

An empty cell

When a piece is missing, the others move up into its place. To keep the place (a card still to come), put a space marked with the dashed line, which in Feitio means "this is a space".

Show code

HTML

<div class="feitio-grid" data-gap="3">
  <article>…</article>
  <article>…</article>
  <div class="slot" aria-hidden="true"></div>  <!-- o tracejado: um espaço -->
  <article>…</article>
</div>

Attributes

Attribute	Values	What for
`class="feitio-grid"`	required	The layout.
`data-gap`	`1` to `7`	The space between pieces. In React, no other value compiles.
`min`	a width	Each column’s minimum width.

The rules and a whole form built with all three are in Layout.