Get Started

Grid & Flexbox

Responsive layout utilities with breakpoint-specific classes for complex layouts.

OxyMade provides comprehensive Grid and Flexbox utility classes for building responsive layouts without writing custom CSS.

Grid System

Basic Grid

Create a grid container:

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Grid Columns

Specify the number of columns:

ClassColumns
grid-cols-11 column
grid-cols-22 columns
grid-cols-33 columns
grid-cols-44 columns
grid-cols-55 columns
grid-cols-66 columns
grid-cols-1212 columns
<div class="grid grid-cols-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Responsive Grid Columns

Apply different column counts at breakpoints:

<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3 xl-grid-cols-4">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Breakpoint prefixes:

  • sm- - Phone portrait (≥480px)
  • md- - Phone landscape (≥640px)
  • lg- - Tablet portrait (≥768px)
  • xl- - Tablet landscape (≥1024px)

Grid Gap

Control spacing between grid items:

<div class="grid grid-cols-3 gap-4">
  <!-- 1rem gap between items -->
</div>

<div class="grid grid-cols-3 gap-6">
  <!-- 1.5rem gap between items -->
</div>

Grid Rows

Specify row configuration:

ClassRows
grid-rows-11 row
grid-rows-22 rows
grid-rows-33 rows
grid-rows-44 rows
grid-rows-66 rows

Grid Auto Flow

Control how items are placed:

ClassBehavior
grid-flow-rowFill rows first
grid-flow-colFill columns first
grid-flow-denseFill gaps densely

Flexbox System

Basic Flex Container

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

ClassDirection
flex-rowHorizontal (default)
flex-colVertical
flex-row-reverseHorizontal reversed
flex-col-reverseVertical reversed
<div class="flex flex-col">
  <div>Top</div>
  <div>Middle</div>
  <div>Bottom</div>
</div>

Flex Wrap

ClassBehavior
flex-wrapAllow wrapping
flex-nowrapNo wrapping
flex-wrap-reverseWrap reversed

Justify Content

Horizontal alignment:

ClassAlignment
justify-startStart
justify-centerCenter
justify-endEnd
justify-betweenSpace between
justify-aroundSpace around
justify-evenlySpace evenly
<div class="flex justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

Align Items

Vertical alignment:

ClassAlignment
items-startTop
items-centerCenter
items-endBottom
items-stretchStretch
items-baselineBaseline
<div class="flex items-center">
  <div>Vertically centered</div>
</div>

Align Self

Individual item alignment:

ClassAlignment
self-autoAuto
self-startStart
self-centerCenter
self-endEnd
self-stretchStretch

Flex Gap

<div class="flex gap-4">
  <!-- 1rem gap between items -->
</div>

Layout Utilities

Display

ClassDisplay
blockBlock
inlineInline
inline-blockInline-block
flexFlex
inline-flexInline-flex
gridGrid
inline-gridInline-grid
hiddenNone

Position

ClassPosition
staticStatic
relativeRelative
absoluteAbsolute
fixedFixed
stickySticky

Overflow

ClassOverflow
overflow-autoAuto
overflow-hiddenHidden
overflow-visibleVisible
overflow-scrollScroll
overflow-x-autoX-axis auto
overflow-y-autoY-axis auto

Z-Index

ClassZ-Index
z-00
z-1010
z-2020
z-3030
z-4040
z-5050
z-autoauto

Common Patterns

Centered Content

<div class="flex items-center justify-center">
  <div>Centered!</div>
</div>

Responsive Card Grid

<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-6">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

<div class="flex flex-col lg-flex-row gap-8">
  <aside class="lg-w-64">Sidebar</aside>
  <main class="flex-1">Main Content</main>
</div>

<nav class="flex items-center justify-between">
  <div class="logo">Logo</div>
  <ul class="flex gap-4">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

<div class="flex flex-col h-full">
  <div class="flex-1">Card content...</div>
  <footer>Card footer</footer>
</div>

Oxygen Integration

Using in Oxygen

  1. Open Oxygen Builder
  2. Select an element
  3. In the Classes panel, find OxyMade collections:
    • OxyMade Grid - Grid utilities
    • OxyMade Flexbox - Flex utilities
    • OxyMade Layout - Display, position, overflow

Building with Collections

Combine utility classes for complex layouts:

grid grid-cols-1 lg-grid-cols-3 gap-6
flex items-center justify-between

Best Practices

Mobile-First

Start with mobile layout, add complexity for larger screens:

<!-- Mobile: 1 col, Tablet: 2 cols, Desktop: 3 cols -->
<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3">

Semantic Structure

Use layout utilities on container elements:

<!-- Good -->
<section class="grid grid-cols-2 gap-8">
  <article>...</article>
  <article>...</article>
</section>

<!-- Avoid -->
<div class="grid grid-cols-2 gap-8">
  <div>...</div>
  <div>...</div>
</div>

Consistent Gaps

Use the spacing scale for gaps:

<div class="grid gap-4">  <!-- Use scale value -->
<div class="flex gap-6">  <!-- Consistent spacing -->

Avoid Nesting

Keep nesting minimal for performance:

<!-- Simple is better -->
<div class="grid grid-cols-3 gap-4">
  <div>Item</div>
</div>

<!-- Avoid deep nesting -->
<div class="grid">
  <div class="flex">
    <div class="grid">
      <div class="flex">...</div>
    </div>
  </div>
</div>

Troubleshooting

Grid Not Working

  1. Verify the element has display: grid
  2. Check for conflicting styles
  3. Ensure grid-cols class is applied

Responsive Classes Not Applying

  1. Verify breakpoint prefix is correct
  2. Check viewport width
  3. Inspect with browser dev tools

Gap Not Showing

  1. Ensure element is flex or grid
  2. Check no margin/padding override
  3. Verify gap value is in the scale