Grid CSS

This page documents the width utility classes that start with w_. These classes set a fixed width (in %) for an element so you can quickly compose grid layouts. They are layout‑agnostic and can be used with float-, flex-, or grid-based containers.

Notes:

• Numeric series: .w_40 down to .w_1 map linearly from 100% to 2.5% in 2.5% steps.
  • Formula: width% = (N / 40) × 100 for .w_N.
• Fractional helpers cover common splits like thirds, sixths, sevenths, and ninths.
• A special variant .w_1-3_g4 compensates for a typical gutter when building 3‑column layouts.

Class reference (w_*)

• Continuous series:

  • .w_40 = 100%
  • .w_39 = 97.5%
  • .w_38 = 95%
  • .w_37 = 92.5%
  • .w_36 = 90%
  • .w_35 = 87.5%
  • .w_34 = 85%
  • .w_33 = 82.5%
  • .w_32 = 80%
  • .w_31 = 77.5%
  • .w_30 = 75%
  • .w_29 = 72.5%
  • .w_28 = 70%
  • .w_27 = 67.5%
  • .w_26 = 65%
  • .w_25 = 62.5%
  • .w_24 = 60%
  • .w_23 = 57.5%
  • .w_22 = 55%
  • .w_21 = 52.5%
  • .w_20 = 50%
  • .w_19 = 47.5%
  • .w_18 = 45%
  • .w_17 = 42.5%
  • .w_16 = 40%
  • .w_15 = 37.5%
  • .w_14 = 35%
  • .w_13 = 32.5%
  • .w_12 = 30%
  • .w_11 = 27.5%
  • .w_10 = 25%
  • .w_9 = 22.5%
  • .w_8 = 20%
  • .w_7 = 17.5%
  • .w_6 = 15%
  • .w_5 = 12.5%
  • .w_4 = 10%
  • .w_3 = 7.5%
  • .w_2 = 5%
  • .w_1 = 2.5%

• Fractional helpers:

  • .w_2-3 = 66.6666%
  • .w_1-3 = 33.3333% (implemented as calc(100%/3))
  • .w_1-6 = 16.6667%
  • .w_1-7 = ~14.2857%
  • .w_1-9 = ~11.1111%
  • .w_1-3_g4 = calc(100%/3 - 14px) — 3 columns with built‑in gutter compensation (use when you have a horizontal gap between items; see example below).

Tip: You can quickly estimate the percentage for any .w_N: N × 2.5%.

Usage examples

Below are practical snippets you can copy. For demonstration, only utility classes are shown without additional inline styling.

1) Two equal columns (50% / 50%)

<div>
  <div class="w_20">.w_20 (50%)</div>
  <div class="w_20">.w_20 (50%)</div>
</div>

2) Three equal columns (33.333% each)

Using plain thirds:

<div>
  <div class="w_1-3">.w_1-3</div>
  <div class="w_1-3">.w_1-3</div>
  <div class="w_1-3">.w_1-3</div>
</div>

With a gap (gutter) and compensation:

<div>
  <div class="w_1-3_g4">.w_1-3_g4</div>
  <div class="w_1-3_g4">.w_1-3_g4</div>
  <div class="w_1-3_g4">.w_1-3_g4</div>
</div>

3) Four equal columns (25% each)

<div>
  <div class="w_10">.w_10 (25%)</div>
  <div class="w_10">.w_10 (25%)</div>
  <div class="w_10">.w_10 (25%)</div>
  <div class="w_10">.w_10 (25%)</div>
</div>

4) Six, seven, and nine columns (compact grids)

<!-- 6 columns -->
<div>
  <div class="w_1-6">1/6</div>
  <div class="w_1-6">1/6</div>
  <div class="w_1-6">1/6</div>
  <div class="w_1-6">1/6</div>
  <div class="w_1-6">1/6</div>
  <div class="w_1-6">1/6</div>
</div>

<!-- 7 columns -->
<div>
  <div class="w_1-7">1/7</div>
  <div class="w_1-7">1/7</div>
  <div class="w_1-7">1/7</div>
  <div class="w_1-7">1/7</div>
  <div class="w_1-7">1/7</div>
  <div class="w_1-7">1/7</div>
  <div class="w_1-7">1/7</div>
</div>

<!-- 9 columns -->
<div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
  <div class="w_1-9">1/9</div>
</div>

5) Mixed layout (e.g., 75% + 25%)

<div>
  <div class="w_30">.w_30 (75%)</div>
  <div class="w_10">.w_10 (25%)</div>
</div>

Tips

• These utilities only set width; ensure your parent container’s layout (float, flex, CSS grid) places items as desired.
• For flex layouts, combine with display:flex; flex-wrap:wrap; on the container.
• Use .w_1-3_g4 when building three‑column layouts with a visible horizontal gap to keep the total row width aligned.

Responsive width utilities (xxlw_, xlw_, lw_, mw_, sw_, xsw_, xxsw_)

The framework also provides responsive-prefixed width utilities that mirror the base w_ classes but only apply at or below specific viewport widths (desktop-first via max-width media queries).

Breakpoints and prefixes:

• xxlw_: active at max-width: 1199.98px
• xlw_: active at max-width: 1023.98px
• lw_: active at max-width: 900.98px
• mw_: active at max-width: 767.98px
• sw_: active at max-width: 599.98px
• xsw_: active at max-width: 479.98px
• xxsw_: active at max-width: 319.98px

How they work:

• Use .<prefix>_N to set width at or below that breakpoint, where N follows the same 40→1 scale as .w_N (N × 2.5%), and the same fractional helpers where available.
• Example equivalents: .xlw_20 = 50%, .mw_10 = 25%, .sw_40 = 100%.
• Some gap-compensated helpers exist for select prefixes, such as .xxlw_20_g4, .xlw_20_g4, .lw_20_g4, .mw_20_g4 and .lw_1-3_g4.
• These rules cascade by viewport size: narrower breakpoints override wider ones.

Note on approach: This is desktop-first (max-width). Define your default layout using w_* for large screens, then progressively override with smaller prefixes as the viewport shrinks.

Example A: 3 → 2 → 1 columns across breakpoints

• Desktop (default): 3 columns using .w_1-3
• ≤1023.98px (xlw_): switch to 2 columns with gutter compensation via .xlw_20_g4
• ≤599.98px (sw_): stack to 1 column using .sw_40

<div>
  <div class="w_1-3 xlw_20_g4 sw_40">Item</div>
  <div class="w_1-3 xlw_20_g4 sw_40">Item</div>
  <div class="w_1-3 xlw_20_g4 sw_40">Item</div>
</div>

Example B: Sidebar + content that stacks on tablets/phones

• Desktop: 75% content + 25% sidebar using .w_30 and .w_10
• ≤900.98px (lw_): stack both to full width using .lw_40

<div>
  <div class="w_30 lw_40">Content (75%)</div>
  <div class="w_10 lw_40">Sidebar (25%)</div>
</div>

Example C: Dense grid becomes 2-col, then 1-col on very small screens

• Desktop: 6 columns using .w_1-6
• ≤479.98px (xsw_): 2 columns using .xsw_20 (50%)
• ≤319.98px (xxsw_): 1 column using .xxsw_40 (100%)

<div>
  <div class="w_1-6 xsw_20 xxsw_40">Card</div>
  <div class="w_1-6 xsw_20 xxsw_40">Card</div>
  <div class="w_1-6 xsw_20 xxsw_40">Card</div>
  <div class="w_1-6 xsw_20 xxsw_40">Card</div>
  <div class="w_1-6 xsw_20 xxsw_40">Card</div>
  <div class="w_1-6 xsw_20 xxsw_40">Card</div>
</div>

Tips:

• Prefer using just the breakpoints you need; don’t over-specify at every tier.
• Combine with your layout (flex/grid) and existing gaps. Where available, _g4 helpers help compensate when using visible horizontal gaps.