Grid & Flex
columns & rows
- Need to confirm with DEAT on grid systems direction, for testing only, all components and or elements should adapt to a grid and or parent container.
- Dotted borders are to show layout patten, not for design.
Grid Span Samples
Even Columns (No Span)
Single Item Spanning Two Columns
Center Item Spanning Two Columns
Feature Block (Span Half the Grid)
Full Width Span (12-Column Grid)
Grid Order Samples
Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Title 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Title 3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Title 4
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Grid - Flex
| Class Group | Flexbox Support | Grid Support |
|---|---|---|
.item-l, .item-c, .item-r |
YES - via margin-* fallback |
YES - via justify-self |
.item-t, .item-m, .item-b |
YES - via align-self |
YES - via align-self |
.item-t-c, etc. full matrix |
YES - with margin + align-self combo |
YES - full support |
.center, .left, .right |
YES - (container-level) | NO - (won’t work inside grid items) |
.middle, .top, .bottom |
YES - (container-level) | NO - (only on container in grid) |
.grow-*, .shrink-* |
YES - native to flex | NO - grid ignores flex-grow/shrink |
.flex-h, .flex-v |
YES - | NO - irrelevant in grid context |
.wrap, .wrap-rev |
YES - | NO - not relevant to grid |
.base-* (basis px values) |
YES - via flex-basis |
NO - no effect in grid |
.order-* |
YES - | NO - grid has different ordering system |
.grid, .grid-cols-* |
NO - irrelevant | YES - native grid syntax |
.col-span-* has media call - :md, :ld, :xl |
NO - irrelevant | YES - native grid syntax |
.gap-* |
NO - irrelevant | YES - full gap control |
Grid System How-To Guide
1. Create a Grid Container
Always start with a parent element that has the .grid class.
<div class="grid">
<!-- Items here -->
</div>2. Set Number of Columns
Control the number of columns with .grid-cols-* classes:
.grid-cols-1 through .grid-cols-12
<div class="grid grid-cols-2">
<div>Item 1</div>
<div>Item 2</div>
</div>3. Make It Responsive
Use responsive grid column classes to change layout at breakpoints:
md:— Tablet (768px)lg:— Desktop (1280px)xl:— Large Desktop (1536px)
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<!-- Items -->
</div>4. Control Item Spans
Use .col-span-* classes to make an item span multiple columns:
.col-span-1— spans 1 column.col-span-2— spans 2 columns.col-span-3— spans 3 columns.col-span-6— spans 6 columns.col-span-12— spans 12 columns
<div class="grid grid-cols-4">
<div class="col-span-2">Big item</div>
<div>Small item</div>
<div>Small item</div>
</div>5. Add Gaps Between Items
Use .gap-*
gap-xs, gap-sm, gap-md, gap-lg, gap-xl see spacing page classes to control spacing between grid items:
.gap-xs— extra small gap.gap-sm— small gap.gap-md— medium gap.gap-lg— large gap.gap-xl— extra large gap
<div class="grid grid-cols-2 gap-md">
<!-- Items -->
</div>Responsive gaps:
md:gap-*lg:gap-*xl:gap-*
Row & Column seperations:
.gap-x-*- Column gap.gap-y-*- Row gap
6. Reorder Items with Order Utilities
Control the visual order of items without changing the HTML structure:
.order-1,.order-2, etc. — set manual order.order-first— move item to start.order-last— move item to end
<div class="grid grid-cols-2">
<div class="order-2">Second</div>
<div class="order-1">First</div>
</div>Responsive Order
Change order at breakpoints with prefixes like md:order-1, lg:order-2:
<div class="order-2 md:order-1">
Text that moves up at tablet size
</div>Quick Reference Cheat Sheet
- Start a grid:
.grid - Set 2 columns:
.grid-cols-2 - Set 4 columns at desktop:
lg:grid-cols-4 - Add a medium gap:
.gap-md - Span 2 columns:
.col-span-2 - Reorder on tablet:
.order-1 md:order-2
Final Reminders
- Always combine
.grid,.grid-cols-*, and.gap-*inside a container. - Mobile-first: layouts default to stacking unless specified with
md:,lg:, orxl:. - Use
.order-*classes to change visual flow without changing the HTML. - Gaps and containers are fully fluid and responsive based on your design tokens.
FLex
---
DEMO ↓
NO FLEX ↓
Title
-1- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam eum illum eveniet vero sit nam nisi recusandae. Sit, et sequi. Aperiam rerum delectus vero recusandae laudantium necessitatibus? Voluptatem, consequuntur id?
Flex only - (defalt) row,nowrap,flext-start,stretch ↓
Title
-1- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam eum illum eveniet vero sit nam nisi recusandae. Sit, et sequi. Aperiam rerum delectus vero recusandae laudantium necessitatibus? Voluptatem, consequuntur id?
**** flex-flow: Short hand for - driection & wrap ************************ ↓
flex-direction: column (row), row-reverse, column-reverse ↓
Title
-1- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam eum illum eveniet vero sit nam nisi recusandae. Sit, et sequi. Aperiam rerum delectus vero recusandae laudantium necessitatibus? Voluptatem, consequuntur id?
flex-wrap: wrap (nowrap), wrap-reverse, row wrap ↓
Title
-1- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam eum illum eveniet vero sit nam nisi recusandae. Sit, et sequi. Aperiam rerum delectus vero recusandae laudantium necessitatibus? Voluptatem, consequuntur id?
display:flex; justify-content: (flex-start), flex-end, center, space-[around], space-[between], space-evenly[even] ↓
Justify center
-1- Lorem ipsum, dolor sit amet
Utility Class Reference Table
| Class Type | Example Classes | What It Does | CSS Property | Breakpoints |
|---|---|---|---|---|
| Layout Mode | .grid, .flex |
Defines display type | display |
Base only |
| Breakpoints | md:, lg:, xl: |
Responsive prefixes | — | Used with any utility |
| Flex Direction | .flex-h, .flex-v |
Sets row or column layout | flex-direction |
Base, md, lg, xl |
| Flex Wrap | .wrap, .wrap-rev |
Controls wrapping of items | flex-wrap |
Base, md, lg, xl |
| Horizontal Alignment | .left, .center, .right,.around, .between, .even |
Aligns items on main axis | justify-content, align-content |
Base, md, lg, xl |
| Vertical Alignment | .top, .middle, .bottom, .stretch, .baseline |
Aligns items on cross axis | align-items, align-content, align-self |
Base, md, lg, xl |
| Flex Grow | .grow-0 – .grow-12 |
Allows item to expand | flex-grow |
Base, md, lg, xl |
| Flex Shrink | .shrink-0 – .shrink-12 |
Allows item to shrink | flex-shrink |
Base, md, lg, xl |
| Flex Basis | .base-10 – .base-1000 |
Sets base item size | flex-basis |
Base, md, lg, xl |
| Grid Columns | .grid-cols-1 – .grid-cols-12 |
Sets number of grid columns | grid-template-columns |
Base, md, lg, xl |
| Grid Column Span | .col-span-1 – .col-span-12 |
How many columns item spans | grid-column |
Base only |
| Gaps |
.gap-xs, .gap-sm, .gap-md.gap-lg, .gap-xl.gap-x-*, .gap-y-*
|
Sets spacing between items |
gap, column-gap, row-gap
|
Base, md, lg, xl |
| Order | .order-1 – .order-12, .order-first, .order-last |
Item sort order | order |
Base, md, lg, xl |
| Item Align (Grid) |
.item-l, .item-c, .item-r.item-t, .item-m, .item-b.item-t-l – .item-b-r
|
Aligns grid item inside its cell | align-self, justify-self |
Base, md, lg, xl |
Flex Container Defaults
| Property | Default Value | What It Means |
|---|---|---|
| flex-direction | row | Children are laid out in a horizontal row |
| flex-wrap | nowrap | Children will stay on a single line, no wrapping |
| justify-content | flex-start | Children align to the left (start of main axis) |
| align-items | stretch | Children stretch to fill container height (cross axis) |
| align-content | stretch | For multi-line containers: lines stretch equally |
Flex Item Defaults (Children of a Flex Container)
| Property | Default Value | What It Means |
|---|---|---|
| flex-grow | 0 | Don’t grow to fill space |
| flex-shrink | 1 | Shrink if needed |
| flex-basis | auto | Size is based on content or set width |
| align-self | auto | Inherits from align-items of parent |
Stack item position
| Class | Horizontal | Vertical | Position |
|---|---|---|---|
| item-l | start | — | left |
| item-c | center | — | center (horizontal) |
| item-r | end | — | right |
| item-t | — | start | top |
| item-m | — | center | middle (vertical) |
| item-b | — | end | bottom |
| item-t-l | start | start | top left |
| item-t-c | center | start | top center |
| item-t-r | end | start | top right |
| item-m-l | start | center | middle left |
| item-m-c | center | center | middle center |
| item-m-r | end | center | middle right |
| item-b-l | start | end | bottom left |
| item-b-c | center | end | bottom center |
| item-b-r | end | end | bottom right |
Stacks
| Class | Description | Behavior | Responsive? |
|---|---|---|---|
| .flex-h | Horizontal stack | Applies display: flex; flex-direction: row; |
No (applies at all screen sizes) |
| .flex-v | Vertical stack | Applies display: flex; flex-direction: column; |
No (applies at all screen sizes) |
| .md:flex-h | Horizontal stack at min-width: 768px |
Same behavior as .flex-h, but only at medium screens and up |
Yes |
| .md:flex-v | Vertical stack at min-width: 768px |
Same behavior as .flex-v, but only at medium screens and up |
Yes |
| .lg:flex-h | Horizontal stack at min-width: 1280px |
Applies display: flex; flex-direction: row; at large screens |
Yes |
| .lg:flex-v | Vertical stack at min-width: 1280px |
Applies display: flex; flex-direction: column; at large screens |
Yes |
| .xl:flex-h | Horizontal stack at min-width: 1536px |
Applies display: flex; flex-direction: row; at extra-large screens |
Yes |
| .xl:flex-v | Vertical stack at min-width: 1536px |
Applies display: flex; flex-direction: column; at extra-large screens |
Yes |
WCAG
| Feature | WCAG Impact | Notes |
|---|---|---|
| .flex-h, .flex-v | Safe | Flexbox-based layout respects DOM order. No reading order issues. |
| .item-* alignment classes | Safe | These control alignment only — they don’t impact semantic or accessible flow. |
| justify-self / align-self | Safe | Purely layout; screen readers and keyboard focus follow DOM order. |
| Responsive class prefixes | Safe | Useful for adapting layout for readability and interaction on different viewports. |
Browser
| CSS Feature | Support | Notes |
|---|---|---|
| flex & flex-direction | Full | Supported in all modern browsers, including IE11 (basic support). |
| justify-self / align-self | Full | Fully supported in Grid. For Flex, align-self works; justify-self is ignored (you get fallback with margin tricks). |
| Responsive media queries | Full | Standard and well-supported. |
| CSS Grid layout | Full | Supported in all modern evergreen browsers. |
| Class name escaping (:) | Full | Supported natively in modern HTML/CSS. |
| Category | Status |
|---|---|
| WCAG | Safe (as long as source order is semantic) |
| Modern Browsers | Fully supported |
| Legacy (IE11) | ⚠Limited Grid support — use Flexbox utilities as fallback |
Flexbox System How-To Guide
1. Create a Flex Container
Wrap your content in a parent element with .flex.
<div class="flex">
<!-- Items here -->
</div>2. Set Flex Direction
Control layout direction with .flex-h (row) or .flex-v (column):
<div class="flex flex-h">
<div>Item 1</div>
<div>Item 2</div>
</div>3. Make It Responsive
Apply breakpoints with md:, lg:, or xl::
<div class="flex flex-v md:flex-h lg:flex-v-rev">
<!-- Items -->
</div>4. Align and Justify Items
Use alignment classes to position children inside the container:
.center— justify-content: center.left— justify-content: flex-start.right— justify-content: flex-end.top— align-items: flex-start.middle— align-items: center.bottom— align-items: flex-end.between,.around,.even— spaced distributions
<div class="flex flex-h between middle">
<div>A</div>
<div>B</div>
</div>5. Add Wrapping
Enable wrapping with .wrap or reverse wrapping with .wrap-rev.
<div class="flex wrap gap-md">
<div>Item</div>
<div>Item</div>
</div>6. Control Spacing
Use gap utilities for consistent spacing between items:
.gap-xs,.gap-sm,.gap-md,.gap-lg,.gap-xl.gap-x-*— horizontal gaps.gap-y-*— vertical gaps
<div class="flex wrap gap-y-md gap-x-sm">
<!-- Items -->
</div>Responsive gaps:
md:gap-*lg:gap-*xl:gap-*
Row & Column seperations:
.gap-x-*- Column gap.gap-y-*- Row gap
7. Control Flex Items
.grow-1through.grow-12— sets flex-grow.shrink-0through.shrink-12— sets flex-shrink.base-10through.base-100010px increments — sets fixed flex-basis in px.flex-10through.flex-10010% increments — shorthand flex (percent-based)
<div class="flex">
<div class="grow-1">Flexible</div>
<div class="base-200">Fixed</div>
</div>8. Use Item Alignment Helpers
Inside grids or flex containers, position individual items:
.item-t,.item-m,.item-b— vertical alignment.item-l,.item-c,.item-r— horizontal alignment.item-t-l, etc. — full matrix alignment
9. Reorder Items
Use order classes to change layout flow without altering markup:
.order-1through.order-12.order-first,.order-last
<div class="flex">
<div class="order-2">Second</div>
<div class="order-1">First</div>
</div>10. Final Reminders
- Use
.flexand direction classes to start layout. - Wrap and align elements with intuitive utility classes.
- Responsive classes like
md:flex-hlet you adapt layouts smoothly. - Combine gap, grow, shrink, and order classes for full control.