Intrinsic patterns

Intrinsic sizes

Before we get into the specifics of some layouts, there are three intrinsic values that we can use when declaring a size on an element:

• min-content - makes the element as small as it can

• max-content - makes the element it’s maximum intrinsic size (no line wraps)

• fit-content - like max-content, but allows for line wrapping if there isn’t enough space

  I don’t use these too often, but in the right situation they can come in handy!

  See the Pen intrinsic navbar by Kevin (@kevinpowell) on CodePen.

Intrinsic layouts with Flexbox

Flexbox works by using the intrinsic size of the Flex Items to create layouts.

As we saw when looking at Flexbox in earlier lessons, we can use display: flex along with flex-wrap: wrap to create an intrinsic layout.

There are also advanced ways that you can use Flexbox to help create more structured intrinsic layouts, but just this behavior here is incredibly useful, and should be a go-to in your aresenal.

.flex-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

See the Pen Taking advantage of intrinsic sizing by Kevin (@kevinpowell) on CodePen.

Another nice trick to to add flex-grow: 1 to all the flex items.

.flexible-chidlren {
  display: flex;
  gap: 12px;
}

.flexible-children > * {
  flex-grow: 1;
}

See the Pen Flex grow - simple example by Kevin (@kevinpowell) on CodePen.

Intrinsic grids

While Grid is “layout first” and feels more ridged than Flexbox, it does create intrinsic layouts as well, just in a different way than how Flexbox works.

For example, technically this would create an intrinsic layout:

.grid {
  display: grid;
  gap: 1rem;
}

We can make this into a 2, 3, or 4 column layout, and the grid will continue making new, implicit rows for us if there are more Grid Items.

However, this isn’t really what we are talking about here.

When we talk about intrinsic layouts, we usually mean ones that adjust automatically.

To be able to do that with grid, we need to use the repeat() syntax, but instead of telling it how many columns to create, we can tell the browser to figure it out on it’s own using either the fit-content or fill-content keywords.

Along with those new keywords, we get a little help from a new value function that’s exclusive to grid, which is minmax().

minmax() takes a minimum and maximum size, and the browser figures things out for us when we use it. In general, we’ll put a minimum size using a fixed value, and a maximum size using 1fr to keep things able to grow.

By using 1fr, we’re saying it’s allowed to take up as much room as it needs to, but we’re also setting a constraint, preventing the columns from getting smaller than a specific size.

It looks like this when we use it:

.auto-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

So, if we do this, we saying the columns have a minimum width of 200px, and can grow as big as they need to grow.

See the Pen auto-fit by Kevin (@kevinpowell) on CodePen.

If the minimum size of your columns is less than 300 or so pixels, it can cause overflow on some devices, so one fix is to use min() function inside of the minmax()… which looks a bit strange, but works great.

.auto-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(min(500px, 100%), 1fr));
}

This is a great use case for a locally scoped custom property.

.auto-grid {
  --min-col-size: 500px;

  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));
}

auto-fit vs. auto-fill

The difference between these two keywords only comes into play if there is space to create more columns, but not content to fill them.

Using auto-fit, it will not create any more columns if there is no content to fill them.

Using auto-fill will continue to fill in more columns, even if there is no content to fill the space.

You can play with the playground below to compare the two. You won’t see a difference if you have a lot of items, but when you reduce the total number of items, you will see the difference (it will help if you go to a larger viewport size).

Remember, Grid and Flex are friends!

We talked about this earlier, but it bears repeating: You don’t need to pick one or the other, the two of them work very well together, even when using more intrinsic patterns.

See the Pen Flex + Grid: BFFs by Kevin (@kevinpowell) on CodePen.

Additional Resources

• Designing Intrinsic Layotus by Jen Simmons (video)
• Intrinsic Sizing In CSS by Ahmad Shadeed