Tutorial 02 · Foundations

Layout & Responsive Grid

Master .luc-container, .luc-grid, .luc-flex and responsive collapse at 1024/768/480.

10 minBeginnerlucUI 2 · v2.1.3

Objectives

  • Use .luc-container (1400px) and spacing tokens.
  • Build 2/3/4-col grids that collapse without JS.
  • Verify no horizontal overflow at 320px.

Steps

Container

layout.html
<div class="luc-container">
  <div class="luc-grid luc-grid-cols-3 luc-gap-6">
    <article class="luc-card">One</article>
    <article class="luc-card">Two</article>
    <article class="luc-card">Three</article>
  </div>
</div>
1
2
3

Auto-fit & Flex

.luc-grid-cols-auto auto-fits min 280px.

auto.html
<div class="luc-grid luc-grid-cols-auto luc-gap-6">
  <article class="luc-card">…</article>
</div>
<div class="luc-flex luc-justify-between luc-gap-4">…</div>

Spacing scale

--space-1 to --space-32 via .luc-m-* .luc-p-*.

.luc-m-4.luc-p-6.luc-gap-8

Result

Resize 1400→320. Columns stack, container pads, no scroll.

Exercise

  1. Build a 12-col marketing row that becomes 1-col on mobile.
  2. Use .luc-measure to cap text at 72ch.
← Previous Next →