For designers

Share out space with grid and fr

The fr unit splits the space in a row by ratio, so an image can take 40% of a card at every width, in CSS grid and in Figma's grid.

Take an article card with an image on the left and a date and a paragraph on the right. The image should take 40% of the card, at every width. The fr unit does that. It means “a fraction of the space left over”.

grid-template-columns: 2fr 3fr;

Read it as: “Split the row into five parts. The first column gets two, the second gets three.” Two parts out of five is 40%.

Try it

Drag the edge of the box. The image stays at 40% of the card. Then add a gap, and switch the column sizes to % and px to compare.

2fr
3fr
0px
Travellers hurry up a hillside path through driving rain, rendered as diagonal woodblock lines.

30 AUG 2025

Specialists have examined Sudden Shower at Shōno, from Fifty-three Stations of the Tōkaidō, 1834–35 by Utagawa Hiroshige (1797–1858) and describe it as fresh to the market and in fine, unrestored condition. It comes from a private collection formed over forty years and leads the opening session of the sale.

grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);

With a gap, fr shares what is left after the gap comes out, so the columns still fit the card. Percentages don’t. 40% 60% plus a gap is wider than the card, and the readout says by how much. A fixed 300px stays 300px, so the image takes a smaller share as the card narrows.

What it means for your designs

Describe the layout as a ratio, not as pixels: “image two parts, text three”. The ratio holds at every width, including the ones you never drew.

  • Think in parts. If the image should be a little wider, make it 3fr 4fr, not “about 43%”.
  • Mix fixed and flexible columns. 300px 1fr is a fixed 300px column plus whatever is left, which suits a sidebar.
  • Choose fr over % whenever there is a gap. The gap comes out first, then the parts share the rest.

In Figma

Auto layout can’t set a ratio. Children set to Fill container share the space equally, so a 40/60 split needs a fixed width on the image, and that breaks as soon as the frame resizes.

Grid auto layout can. Make the card a grid with one row and two columns, and set both columns to Fill container. Figma measures those columns in fr, so enter 2fr for the image and 3fr for the text, on the column’s label on the canvas or in the right sidebar. Set Gap between columns, and set the image to Fill container so it fills its cell. The frame now resizes the way the browser will.

Figma works out each column’s share the same way CSS does: its fr divided by the total. Typing Auto for a column gives it 1fr.

Hand the column values over as they are. A developer types the same numbers.

Say this to a developer

“Can the card be a two-column grid, 2fr 3fr, so the image is 40% at every width?”

Article card
.article-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem;
}

The minmax(0, …) lets a column shrink below the width of its content, so the ratio holds.

Watch out for

Gotcha

A plain 1fr won’t shrink below its content’s minimum size. A long word or a wide image pushes the column past its share. minmax(0, 1fr) stops that.

  • With a gap, 2fr 3fr puts the image just under 40% of the whole card, because the gap comes out first. For exactly 40% of the card, the ratio has to allow for the gap.
  • On phones the card usually stacks, with the image above the text. Say at what width, or pair it with a container query.
  • A fixed column is fixed. 300px 1fr gives the image 300px on a wide card and most of a narrow one.

Browser support

Every current browser, and every browser since 2017.