Create Responsive Layouts

The first step in creating a responsive layout is to implement a fluid grid. The SLDS grid utility provides a mobile-first layout system with granular column control. To implement the grid system in a Lightning web component, use the lightning-layout and lightning-layout-item base components. When implementing fluid grids, the layout starts to break down at specific breakpoints. To resolve this layout issue, media queries determine how the layout should look at each breakpoint. These responsive breakpoints are built into lightning-layout-item, enabling you to define how each column adjusts to the screen size.

Let’s start with a one-column grid. Despite being simple visually, in this example there are three separate levels of containment. The lightning-card base component defines a container with rounded corners around the content. The lightning-layout base component creates a wrapper around the content using the slds-grid class. The lightning-layout-item component creates columns using the slds-col class.

To increase the number of columns, add another lightning-layout-item with some content.

Let’s make some adjustments so that the content is more readable on mobile. To make each column full width, add size="12". The 12-column grid is the most frequently used SLDS grid. On this grid, the size attribute for lightning-layout-item accepts a value from 1 to 12.

The multiple-rows attribute on lightning-layout adds a slds-wrap class to the container, which wraps your column to a new row.

When we view the page on a tablet or desktop, the sidebar column should align horizontally with the main content column. Specify the width of the main content such that it takes up 75% of the container width using small-device-size="9". See lightning-layout-item.

Using just markup, you can provide size details for both desktop/tablet and phone/small mobile. It’s ratio-based and enables the device to effectively pick the right layout based on its own screen size.