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 Feb 19 '19 at 7:54

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.

| improve this answer | |
  • 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... – PatMcClellan__c Feb 19 '19 at 19:09
  • @PatMcClellan__c Not entirely your fault, the original factors didn't include 5, 7, or 8 (if I recall correctly). – sfdcfox Feb 20 '19 at 4:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.