Basically, I have 3 elements:
- text left
- centerpiece
- text right
I want the text centered around the centerpiece, and I want the centerpiece to be in the exact middle of the container. I initially thought flexbox would be a good fit for this with justify-content: space-between, but I ran into all sorts of problems trying to align the text and make the centerpiece in the middle. I got it working with CSS Grid and it seems to work well:
:root { --centerpiece-padding: 5px;}.container { display: grid; width: 300px; grid-template-columns: 1fr auto 1fr; background: lightgray; align-items: center;}.centerpiece { width: 32px; height: 32px; border-radius: 20px; background: gold;}.text-left { justify-self: right; padding-right: var(--centerpiece-padding);}.text-right { justify-self: left; padding-left: var(--centerpiece-padding);}<div class="container"><div class="text-left">Gold Medal</div><div class="centerpiece"></div><div class="text-right">Winner</div></div>However, my understanding is that Grid is mainly for 2-dimensional layouts, and that Flexbox is really what you want to use for 1D layouts. Am I missing something obvious that would have made Flexbox easy for this?