Responsive Layouts

It goes without saying that we need to build responsive layouts. There are generally two ways of doing this with Splendid Layouts:

1. Using Tailwind’s responsive variants
2. Using CSS

Using Tailwind Variants

We recommend using Tailwind variants to build single-use responsive layouts. If your layout is reusable across multiple pages, you should use CSS instead.

Here’s an example that creates a 1-column layout on mobile and 2-column layout on tablet viewports.

<div class="grid-simple md:[--cols:2]"> ... </div>

Using CSS

Creating a responsive grid in CSS is straightforward. Simply write a media query and change the value of the --cols variable. If you’re using Tailwind, you can @apply the layout class to your selector — as if you’re using a Sass mixin works.

<div class="your-grid"> ... </div>

.your-grid {
  @apply grid-simple;
  --cols: 1;

  @media (width >= 600px) {
    --cols: 2;
  }
}

Composing Classes

You can compose classes to create responsive layouts as well. For example, let’s say you want to use vertical on mobile and horizontal on desktop.

You can use Tailwind’s responsive variants to do this:

<div class="vertical md:horizontal"> ... </div>

You can also use Tailwind’s @apply feature to compose classes in your CSS.

<div class="your-grid"> ... </div>

.your-grid {
  @apply vertical;

  @media (width >= 600px) {
    @apply horizontal;
  }
}