I not too long ago wanted to construct a design for a contact checklist that appears like this:
It consists of an electronic mail deal with and phone quantity (with the potential so as to add extra contact varieties), every with an icon on the proper and textual content on the left. Every merchandise wanted to be a hyperlink (together with the icon). The essential factor was that the width of the gadgets ought to be decided by the longest merchandise. Within the case of the picture above, the merchandise with the longest content material could be the e-mail deal with, so the second merchandise (the phone quantity) would should be the identical width as this, though its content material is shorter.
Flex or block gadgets by default take up 100% of the mother or father width. Laborious-coding a width on the gadgets wouldn’t be a fascinating answer, because the size of the content material could also be unknown.
Fixing it with Grid
I didn’t fairly know the way I’d sort out this, however I had a hunch that utilizing max-content with CSS Grid may present the answer. It seems I used to be proper. If we set the next CSS properties on the checklist, then each gadgets might be sized to the width of the longest merchandise:
.contact-list {
show: grid;
grid-template-columns: minmax(0, max-content);
}Utilizing the grid-template-columns property, this units a single column for the grid, which has a minimal width of 0 and a most width of max-content. Referring to the specification for max-content, that is:
A field’s “very best” measurement in a given axis when given infinite obtainable house. Normally that is the smallest measurement the field might soak up that axis whereas nonetheless becoming round its contents, i.e. minimizing unfilled house whereas avoiding overflow.
The 0 worth within the minmax() operate doesn’t matter an excessive amount of – it might the truth is be and stuck worth beneath the utmost content material measurement. If we all know that we by no means need our checklist gadgets to be narrower than 5rem, then we would put that worth in right here.
Different options
I shared this tip on Twitter as I believed it could be helpful. It received a a lot greater response than I anticipated, so it appears this could be useful for lots of people. A few individuals identified that you might additionally obtain the identical end result with inline-block or inline-flex. (Thanks @htmlvv, @ripcorddesign and @hack_nug!) I’ve ready a demo exhibiting the totally different potential options:
See the Pen Other ways to pressure two checklist gadgets to take the width of the longest by Michelle Barker
(@michellebarker) on CodePen.
When utilizing inline-block or inline-flex the browser provides a high and backside margin, which that you must set to 0 (until it’s fascinating, in fact). With inline-flex you additionally want so as to add flex-direction: column, so general that choice has probably the most strains of code:
/* Inline-block */
.contact-list--inline-block {
show: inline-block;
margin: 0;
}
/* Inline-flex */
.contact-list--inline-flex {
show: inline-flex;
flex-direction: column;
margin: 0;
}Professionals and cons
Each these options have the benefit over Grid of higher browser help. Nevertheless, help for Grid is superb, so the one place this is able to actually be a problem is Web Explorer. Within the context of progressive enhancement, this works completely fantastic, a minimum of for my use case: in browsers that don’t help Grid, every merchandise would merely be 100% width. Not as elegant, however completely practical.
The opposite two options really feel a bit extra hacky to me – much less intentional, and probably not utilizing the properties as designed. However we do loads of hacky stuff with CSS day-after-day, so it’s positively not an issue. The Grid answer is the one I carried out on the time, so I’m going to keep it up – and it’s useful to know that it might additionally work within the context of a bigger grid if wanted. However be happy to select the one which works for you!
