Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min

Last week I shared a #devsheet covering the CSS width properties min-content, max-content, and fit-content. I recommend having a look if you're not familiar with these CSS properties.

While reading about these underused properties, I discovered a neat pattern to build a centered navigation bar on CSS-Tricks.

The pattern uses fit-content to make the navigation take the exact amount of space to fit in all entries. The list container is then moved into the horizontal center using margin: 1em auto;.

ul {
  background: deepskyblue;
  padding: 1em;
  /* try to give the list as much space as needed */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* move the container to the center on the X-axis */
  margin: 1em auto;
}

li {
  display: inline-block;
  background: tomato;
  padding: .5em;
}

If you tried to give a centered navigation bar the exact fitting width paired with a background or border color, you might have already lost some hair on this problem.

Using fit-content is a beautiful solution, and I'm sure I'll reuse this pattern repeatedly in the future!

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 14 days ago.

Related Topics

Related Articles