I'm trying to use lightning-layout and lightning-layout-item to get a row with 7 equally spaced columns (no matter the contents) that fills the full width of the container.

slds-grid is useless because 7 columns don't factor very well to the 12 system.

This is for a calendar, where I'll be stacking the weeks. Any given week looks OK, but when stacked, it's obvious that the dates with 2 chars are a bit wider than the ones with 1 char.

I'm hoping to stick with lightning/slds rather than jumping over to html/css.

Any ideas?

  • 1
    Did you try slds-size_1-of-7
    – Eric
    Commented Feb 19, 2019 at 7:54

1 Answer 1


In SLDS, you can specify sizes of 2, 3, 4, 5, 6, 7, 8, and 12 columns. In your specific example, you would use slds-size_1-of-7 over all 7 columns in order to generate the appropriate layout.

  • Perfect, thanks. I had been reading all about grid and was thinking in terms of 12 and factors. Sorry to miss something so clearly documented... Commented Feb 19, 2019 at 19:09
  • @PatMcClellan__c Not entirely your fault, the original factors didn't include 5, 7, or 8 (if I recall correctly).
    – sfdcfox
    Commented Feb 20, 2019 at 4:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .