Layout

AliasCSS includes a broad layout vocabulary built around length-based properties, display utilities, flexbox, grid, positioning, overflow, and box-model helpers. The intent is to let you express common layout decisions directly in class names while still keeping a close relationship with native CSS concepts.

Length-based properties

Most properties that accept a length value work in a similar way in AliasCSS. You can usually write either the full semantic property name or its shorthand alias.


padding(p), margin(m), gap(g), width(w), height(h), border-width(bw),
line-height(lh), letter-spacing(les), border-radius(br), text-indent(ti),
text-shadow(txs), box-shadow(bxs), top(t), bottom(btm), right(r), left(l), outline-width(olw),
background-size(bgs), background-position(bgp), inline-size(is), block-size,
margin-block, padding-block

Examples

Classname	Shorthand	Compiled style
`width-200px`	`w-200px`	`width:200px`
`max-width-960px`	`xw-960px`	`max-width:960px`
`min-width-600px`	`mw-600px`	`min-width:600px`
`margin-2rem`	`m-2rem`	`margin:2rem`
`margin-2rem-12px`	`m-2rem-12px`	`margin:2rem 12px`
`margin--2rem-12px`	`m--2rem-12px`	`margin:-2rem 12px`
`margin--2rem--12px`	`m--2rem--12px`	`margin:-2rem -12px`
`margin-12px-0px-12px--8px`	`m-12px-0px-12px--8px`	`margin:12px 0px 12px -8px`
`margin-x-12px`	`mx-12px`	`margin-right:12px; margin-left:12px`
`margin-x-4`	`mx-4`	`margin-right:1rem; margin-left:1rem`
`border-radius-10px`	`br-10px`	`border-radius:10px`
`box-shadow--1px-0px-2px-4px-black/7`	`bxs--1px-0px-2px-4px-black/7`	`box-shadow:-1px 0px 2px 4px oklch(from black l c h / 0.7)`
`text-shadow-1px-1px-4px-black`	`txs-1px-1px-4px-black`	`text-shadow:1px 1px 4px black`

Numeric values from 1 to 10 used with padding, margin, and gap are converted to a spacing scale based on 0.25rem * n, so 4 becomes 1rem.

Usage


<h1
  class="mx-4 p-32px-24px w-100% mh-200px bgc-primary600/7 c--text-color"
>
  Hello, World
</h1>

This pattern is especially useful because the class names stay visually close to the CSS they generate.

Non-numeric length values

AliasCSS also supports values such as min-content, max-content, fit-content, and function-based values like min(), max(), and clamp().

Examples

Classname	Shorthand	Compiled style
`width-max-content`	`w-xc`	`width:max-content`
`width-min-content`	`w-mc`	`width:min-content`
`width-fit-content`	`w-fc`	`width:fit-content`
`width-min(40%,400px)`	`w-min(40%,400px)`	`width:min(40%, 400px)`
`width-max(40%,400px)`	`w-max(40%,400px)`	`width:max(40%, 400px)`
`width-clamp(20rem,30vw,70rem)`	`w-clamp(20rem,30vw,70rem)`	`width:clamp(20rem, 30vw, 70rem)`

MDN describes clamp() as a CSS function that constrains a value between a minimum and maximum bound, and minmax() as a range function used with CSS Grid, which makes these formats useful for responsive, token-friendly layouts .

Usage


<h1
  class="w--header-width mx-4 p-32px-24px mh-200px bgc-primary600/7 c--text-color"
  style="--header-width:clamp(min(10vw, 20rem), 300px, max(90vw, 55rem))"
>
  Hello, World
</h1>

💡

Try to use CSS variables as much as possible for complex values. It keeps the class names readable while still giving you full access to native CSS functions.

Flex, grid, and box model

AliasCSS includes short, memorable shorthands for common display, alignment, flexbox, and grid properties. Flexbox is generally best for one-dimensional layouts, while CSS Grid is intended for two-dimensional layouts with rows and columns

Common class names

Classname	Shorthand	Compiled style
`display-flex`	`df` or `d-f`	`display:flex`
`gap-16px`	`g-16px`	`gap:16px`
`display-inline-flex`	`dif` or `d-if`	`display:inline-flex`
`display-grid`	`dg` or `d-g`	`display:grid`
`display-inline-grid`	`dig` or `d-ig`	`display:inline-grid`
`display-block`	`db` or `d-b`	`display:block`
`display-inline-block`	`dib` or `d-ib`	`display:inline-block`
`display-none`	`dn` or `d-n`	`display:none`
`align-content-start`	`acs` or `ac-s`	`align-content:start`
`align-items-center`	`aic` or `ai-c`	`align-items:center`
`align-self-stretch`	`ass` or `as-s`	`align-self:stretch`
`justify-content-space-between`	`jcsb` or `jc-sb`	`justify-content:space-between`
`flex-shrink-0`	No shorthand	`flex-shrink:0`
`flex-basis-200px`	`fb-200px`	`flex-basis:200px`
`flex-grow-0`	`fg-0`	`flex-grow:0`
`flex-direction-row`	`fdr` or `fd-r`	`flex-direction:row`
`flex-direction-row-reverse`	`fdrr` or `fd-rr`	`flex-direction:row-reverse`
`flex-direction-column`	`fdc` or `fd-c`	`flex-direction:column`
`flex-direction-column-reverse`	`fdcr` or `fd-cr`	`flex-direction:column-reverse`
`grid-template-columns-repeat-3-1fr`	`gtc-repeat-3-1fr`	`grid-template-columns:repeat(3, 1fr)`
`grid-template-rows-repeat-3-1fr`	`gtr-repeat-3-1fr`	`grid-template-rows:repeat(3, 1fr)`
`grid-template-rows-200px-1fr`	`gtr-200px-1fr`	`grid-template-rows:200px 1fr`
`grid-template-columns-repeat-auto-fill-200px`	`gtc-repeat-auto-fill-200px`	`grid-template-columns:repeat(auto-fill, 200px)`
`grid-auto-rows-200px`	`gar-200px`	`grid-auto-rows:200px`
`grid-auto-rows-minmax-100px-auto`	`gar-minmax-100px-auto`	`grid-auto-rows:minmax(100px, auto)`
`grid-column-start-2`	`gcs-2`	`grid-column-start:2`
`grid-column-end-4`	`gce-4`	`grid-column-end:4`
`grid-row-start-1`	`grs-1`	`grid-row-start:1`
`grid-row-end--3`	`gre--3`	`grid-row-end:-3`
`grid-row-end-span-3`	`gre-span-3`	`grid-row-end:span 3`
`grid-column-1/2`	`gc-1/2`	`grid-column:1 / 2`
`grid-column-1/--2`	`gc-1/--2`	`grid-column:1 / -2`
`grid-row-1/4`	`gr-1/4`	`grid-row:1 / 4`
`grid-area-1/1/4/2`	`ga-1/1/4/2`	`grid-area:1 / 1 / 4 / 2`

Card grid example


<!-- Layout -->
<div class="d-g gtc-repeat-auto-fit-minmax-280px-1fr g-20px p-8px ff-inter">
  <!-- Card -->
  <article
    class="
      d-f fd-c g-16px
      p-20px
      br-20px
      bgc-white
      b-1px-s-black/1
      bxs-0px-12px-32px--8px-black/1
    "
  >
    <div class="d-f aic jcsb g-12px">
      <span class="d-ib p-6px-12px br-999px bgc-blue/1 c-blue fs-12px fw-600 les-0.02em">
        Featured
      </span>
      <span class="fs-13px c-gray500">Updated today</span>
    </div>
 
    <div class="d-f fd-c g-8px">
      <h3 class="fs-20px fw-700 lh-28px c-gray900 m-0">Card Title</h3>
      <p class="fs-15px lh-24px c-gray600 m-0">
        A more modern card layout with better spacing, softer elevation, and a cleaner reading flow.
      </p>
    </div>
 
    <div class="d-f fd-c g-10px p-16px br-16px bgc-gray50">
      <span class="fs-13px c-gray500">Performance</span>
      <strong class="fs-28px fw-700 lh-32px c-gray900">87%</strong>
      <div class="w-100% h-8px br-999px bgc-gray200 oh">
        <div class="w-87% h-100% bgc-blue br-999px"></div>
      </div>
    </div>
 
    <div class="d-f aic jcsb g-12px mt-auto pt-4px">
      <div class="d-f aic g-8px">
        <div class="w-10px h-10px br-999px bgc-green"></div>
        <span class="fs-14px c-gray600">Active</span>
      </div>
 
      <button class="p-10px-14px br-12px bgc-black c-white fs-14px fw-600 bn">
        View Details
      </button>
    </div>
  </article>

Flex Layout Example


<article
  class="
    d-f fd-c g-16px
    p-24px
    ff-inter
    w-100% xw-380px
    br-20px
    b-1px-s-black/1
    bgc-white
    bxs-0px-12px-32px--8px-black/1
  "
>
  <div class="d-f aic jcsb g-12px">
    <span
      class="
        d-ib
        p-6px-12px
        br-999px
        bgc-blue/1
        c-blue
        fs-12px
        fw-600
        les-0.02em
      "
    >
      New Release
    </span>
 
    <button
      class="
        d-f aic jc-c
        w-40px h-40px
        br-999px
        b-1px-s-black/1
        bgc-white
        c-gray
      "
      aria-label="Save card"
    >
      ☆
    </button>
  </div>
 
  <div class="d-f fd-c g-8px">
    <h3 class="fs-22px fw-700 lh-30px c-black">
      Analytics workspace card
    </h3>
 
    <p class="fs-15px lh-24px c-gray600 m-0">
      A clean content card for dashboards, landing pages, and design systems. It gives you space for status, title, short description, and actions.
    </p>
  </div>
 
  <div class="d-f fd-c g-10px p-16px br-16px bgc-gray50">
    <div class="d-f aic jcsb">
      <span class="fs-13px c-gray500">Monthly revenue</span>
      <span class="fs-13px fw-600 c-green">+12.4%</span>
    </div>
 
    <div class="fs-28px fw-700 lh-32px c-black">
      $48,240
    </div>
 
    <div class="w-100% h-8px br-999px bgc-gray200 oh">
      <div class="w-72% h-100% bgc-blue br-999px"></div>
    </div>
  </div>
 
  <div class="d-f aic jcsb g-12px mt-4px">
    <div class="d-f aic g-8px">
      <div class="w-10px h-10px br-999px bgc-green"></div>
      <span class="fs-14px c-gray600">Updated 2 hours ago</span>
    </div>
 
    <a
      href="#"
      class="
        d-ib
        p-10px-14px
        br-12px
        bgc-black
        c-white
        fs-14px
        fw-600
        td-none
      "
    >
      Open
    </a>
  </div>
</article>

Practical guidance

A good rule of thumb is:

Use flexbox for rows, columns, alignment, and small component layouts.
Use grid for page sections, card layouts, and two-dimensional placement.
Use spacing and sizing utilities to keep those layouts readable without dropping into custom CSS too early.

Positioning

AliasCSS also includes concise positioning and overflow helpers for stacking, anchoring, clipping, and scroll behavior.

Common class names

Classname	Shorthand	Compiled style
`position-absolute`	`pa`	`position:absolute`
`position-relative`	`pr`	`position:relative`
`position-fixed`	`pf`	`position:fixed`
`position-static`	`ps`	`position:static`
`position-sticky`	`pst`	`position:sticky`
`top-20px`	`t-20px`	`top:20px`
`right-20px`	`r-20px`	`right:20px`
`bottom-20px`	`btm-20px`	`bottom:20px`
`left--20px`	`l--20px`	`left:-20px`
`inset-0`	`i-0`	`inset:0`
`overflow-hidden`	`oh`	`overflow:hidden`
`overflow-y-auto`	`oya`	`overflow-y:auto`
`overflow-x-scroll`	`oxs`	`overflow-x:scroll`
`float-right`	`fr`	`float:right`
`float-left`	`fl`	`float:left`
`clear-left`	`cl`	`clear:left`
`clear-right`	`cr`	`clear:right`
`clear-both`	`cb`	`clear:both`

These utilities are useful for overlays, badges, floating panels, sticky headers, scroll regions, and classic float-based content when needed.

CSS variables for complex layout values

When layout values become too complex, CSS variables are the cleanest escape hatch.

💡

You can always use CSS variables to handle complex layout values and then reference them from AliasCSS utilities.


<section
  class="gtc--panel-grid-area gta--named-grid-areas"
  style='
    --panel-grid-area: repeat(3, [col-start] 1fr [col-end]);
    --named-grid-areas: "header header header" "sidebar main main" "footer footer footer";
  '
>
  Hello, World
</section>

This approach is especially helpful for grid template definitions, named grid areas, complex clamp() expressions, and shared layout tokens.

Guidance

A practical way to use AliasCSS layout features is to work in layers:

Start with display utilities such as df or dg.
Add spacing with margin, padding, and gap utilities.
Define structure with width, height, basis, and grid-template helpers.
Add positioning only when the layout truly needs stacking or offset control.
Move complex expressions into CSS variables instead of overloading class names.