Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Grid & columns
Layout

Grid & columns

Equal columns, responsive breakpoints, and auto-fit arrangements.

CSS only4 examplesKeyboard friendly HTML

Responsive columns

One column by default, two from 40rem, and three from 64rem. Resize the window to try it.

Live preview
Column 01
Column 02
Column 03
Column 04
Column 05
Column 06
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-grid sl-sm:cols-2 sl-lg:cols-3 sl-gap-4">
  <div class="demo-cell">Column 01</div>
  <div class="demo-cell">Column 02</div>
  <div class="demo-cell">Column 03</div>
  <div class="demo-cell">Column 04</div>
  <div class="demo-cell">Column 05</div>
  <div class="demo-cell">Column 06</div>
</div>
HTML source · enable JavaScript for the playground8 lines · UTF-8

Auto-fit cards

No breakpoint classes needed. Columns fit the space available.

Live preview

First idea

A flexible foundation.

Next idea

Room to grow.

Another idea

A new perspective.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-auto-grid sl-gap-4" style="--sl-card-min: 12rem">
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">First idea</h3>
    <p class="sl-text-muted">A flexible foundation.</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">Next idea</h3>
    <p class="sl-text-muted">Room to grow.</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">Another idea</h3>
    <p class="sl-text-muted">A new perspective.</p>
  </article>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

Exact pixel breakpoints

Four columns above 1200px, three at 1200px, two at 1023px, one at 991px; the 767px class is also active on phones.

Live preview
1
2
3
4
View HTML / PlaygroundHTML source
example.htmlHTML
<div
  id="pixel-grid"
  class="sl-grid sl-cols-4 sl-down-1200:cols-3 sl-down-1023:cols-2 sl-down-991:cols-1 sl-down-767:cols-1 sl-gap-4"
>
  <div class="demo-cell">1</div>
  <div class="demo-cell">2</div>
  <div class="demo-cell">3</div>
  <div class="demo-cell">4</div>
</div>
HTML source · enable JavaScript for the playground9 lines · UTF-8

Nested grids are independent

Live preview

Outer column

A
B

Another column

Each nested grid starts from one column unless configured.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-grid sl-md:cols-2 sl-gap-4">
  <div class="sl-card sl-stack">
    <h3 class="sl-text-lg">Outer column</h3>
    <div class="sl-grid sl-cols-2 sl-gap-2">
      <div class="demo-cell">A</div>
      <div class="demo-cell">B</div>
    </div>
  </div>
  <div class="sl-card sl-stack">
    <h3 class="sl-text-lg">Another column</h3>
    <p>Each nested grid starts from one column unless configured.</p>
  </div>
</div>
HTML source · enable JavaScript for the playground13 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.