Sizing to the content in CSS

Three keywords that ask the content how wide it wants to be.

.tag { inline-size: max-content; padding-inline: 0.6em; }

.label-column {
  inline-size: min-content;
  overflow-wrap: break-word;
}

.drawer {
  inline-size: fit-content;
  max-inline-size: 24rem;
  min-inline-size: 12rem;
}

.split {
  display: grid;
  grid-template-columns: fit-content(20rem) 1fr;
  gap: 1.5rem;
}

How it works

1. min-content is the widest unbreakable word.
2. max-content is the whole thing on one line, however long that is.
3. fit-content sizes to the content between those two bounds.
4. The functional fit-content(20rem) is a grid track size, not a width.

Keywords and builtins used here

• display
• drawer
• em
• gap
• grid
• rem
• split
• tag

The run, in numbers

Lines

18

Characters to type

303

Tokens

66

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 47 seconds.

Type this snippet

Step 1 of 3 in Sizing, step 14 of 24 in Flexbox & grid.

← Previous Next →