In creating reusable components for communities I have come up against a bit of a challenge with layout. Let's say I am designing a simple table. When a user places this table in a main layout column, I would like it to display as a normal table does. However, if placed in a sidebar or viewed on a narrower device it should reflow to display rows as cards. A responsive layout with respect to viewport size can be accomplished with media queries, but CSS does not support element queries yet.

Has anyone solved this problem in lightning in a reusable fashion or had luck bringing in a third party library such as EQCSS (http://elementqueries.com/) to accomplish this? Is current best practice to have a design attribute that users must choose their layout type instead of it being dynamically determined based on placement?

  • I have a similar question here that has yet to get an answer that works: salesforce.stackexchange.com/questions/155296/… – Eric Mar 8 '17 at 1:51
  • @Eric If I don't get any info on here I am going to just try a number of the third party libraries to see if there are any that don't require a complete rewrite of SLDS to work. – dsharrison Mar 8 '17 at 3:10

They made the media queries even easier to access with the visibility classes.


You can use the combination of below classes to hide or show items.

Salesforce visibility media queries

you can display your results in three different items

large and medium tables

<table class="slds-medium-show"></table>

small cards

<div class="slds-small-show-only"></div>

really small cards

<div class="slds-x-small-show-only"></div>

hope this helps.

| improve this answer | |
  • Those utility classes are still using the viewport size though, right? – dsharrison May 12 '17 at 23:46
  • @dsharrison Correct. So if you component lives in a small region (for instance a sidebar) you'd still have issues, even though the viewport size could be large. – Björn Feb 22 '18 at 14:05
  • If only they placed a link to this in the LDS Grid section! I was looking for this and didn't notice this section at all. Thanks @Sid! – Rohit Kunal Jun 1 '18 at 13:30

You can use the lightning design system which provides a full grid for you.

| improve this answer | |
  • 1
    Is their grid system based off of container size and not device size? I looked at the scss source code and I only saw media queries in there. – dsharrison Mar 8 '17 at 1:15
  • I am not 100% sure. Might be worth just trying it in a small POC – Jannis Bott Mar 8 '17 at 1:33
  • 2
    @JannisBott - Grid sizing unfortunately does not work properly when in the narrow right side or lightning page until the window is narrowed – Eric Mar 8 '17 at 1:52

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.