Not using Tailwind

You can still use Splendid Layouts if you don’t want to use Tailwind. You just can’t take advantage of the @apply feature and responsive variants that Tailwind provides.

Using CSS Variables

If you want to use CSS variables that our layout classes provide, you need to compose the layout class with your own selector. Then use the variable inside your selector.

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

.your-selector {
  --cols: 2;
}

Building responsive layouts

You can use media or container queries in your CSS to build responsive layouts.

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

.your-selector {
  --cols: 1;

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

However, you will not be able to compose multiple class layouts together to create a responsive layout. Unfortunately, that’s a limitation with Vanilla CSS, hence, we recommend using Tailwind with this librray.