UIKit CSS Tutorial
Introduction →

Column Component (Grid System)

Column Component: UIKit's grid system provides a powerful, responsive way to create complex layouts. It uses a flexible 12-column system that automatically adjusts based on screen size.

Live Examples

1. Basic Grid System

Example Preview

Column 1 of 3

Column 2 of 3

Column 3 of 3

1/2 on mobile
1/4 on desktop

1/2 on mobile
1/4 on desktop

1/2 on mobile
1/4 on desktop

1/2 on mobile
1/4 on desktop

Code:
<!-- 3 Column Grid -->
<div class="uk-child-width-1-3@s" uk-grid>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>Column 1 of 3</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>Column 2 of 3</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>Column 3 of 3</p>
    </div>
  </div>
</div>

<!-- Responsive Grid -->
<div class="uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
  <div>
    <div class="uk-card uk-card-secondary uk-card-body">
      <p>1/2 on mobile, 1/4 on desktop</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-secondary uk-card-body">
      <p>1/2 on mobile, 1/4 on desktop</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-secondary uk-card-body">
      <p>1/2 on mobile, 1/4 on desktop</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-secondary uk-card-body">
      <p>1/2 on mobile, 1/4 on desktop</p>
    </div>
  </div>
</div>

2. Responsive Breakpoints

Example Preview
XS
1 column
S
1/2 columns
M
1/3 columns
L
1/4 columns
XL
1/6 columns
XXL
1/6 columns

Expand equally on small screens and above

All columns share available space

Responsive and fluid layout

Code:
<!-- Responsive Breakpoints -->
<div class="uk-child-width-1-1
            uk-child-width-1-2@s
            uk-child-width-1-3@m
            uk-child-width-1-4@l
            uk-child-width-1-6@xl" uk-grid>
  <!-- Columns will show different layouts based on screen size -->
  <div>Extra Small (1 column)</div>
  <div>Small (1/2 columns)</div>
  <div>Medium (1/3 columns)</div>
  <div>Large (1/4 columns)</div>
  <div>Extra Large (1/6 columns)</div>
  <div>Extra Extra Large (1/6 columns)</div>
</div>

<!-- Expand Columns -->
<div class="uk-child-width-expand@s" uk-grid>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>Expand equally on small+</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>All columns share space</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>Responsive layout</p>
    </div>
  </div>
</div>

3. Grid Gaps & Spacing

Example Preview

No gap (collapse)

Grid collapse removes all gaps

Cards touch each other

Small gap

Default grid spacing

Perfect for most layouts

Medium gap

Increased spacing

For content-heavy layouts

Large gap

Maximum spacing

For spacious designs

Code:
<!-- Grid Gaps -->
<!-- No Gap (Collapse) -->
<div class="uk-child-width-1-3@s uk-grid-collapse" uk-grid>
  <div>No gap between columns</div>
  <div>Cards touch each other</div>
  <div>Use for full-width designs</div>
</div>

<!-- Small Gap (Default) -->
<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
  <div>Small gap between columns</div>
  <div>Default spacing</div>
  <div>Perfect for most layouts</div>
</div>

<!-- Medium Gap -->
<div class="uk-child-width-1-3@s uk-grid-medium" uk-grid>
  <div>Medium gap between columns</div>
  <div>Increased spacing</div>
  <div>For content-heavy layouts</div>
</div>

<!-- Large Gap -->
<div class="uk-child-width-1-3@s uk-grid-large" uk-grid>
  <div>Large gap between columns</div>
  <div>Maximum spacing</div>
  <div>For spacious designs</div>
</div>

4. Nested Grids

Example Preview

Main Column 1

Nested Column 1A

Nested Column 1B

Main Column 2

Sub 2A

Sub 2B

Sub 2C

Parent Grid

Child A

Child B

Full Width Child

Complex Nested Structure

Level 1

Level 2A

Level 2B

Another Level 1

Small

Large

Code:
<!-- Nested Grid Example -->
<div class="uk-child-width-1-2@s" uk-grid>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <h4>Main Column 1</h4>
      <div class="uk-child-width-1-2 uk-grid-small" uk-grid>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Nested Column 1A</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Nested Column 1B</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-secondary uk-card-body">
      <h4>Main Column 2</h4>
      <div class="uk-child-width-1-3 uk-grid-small" uk-grid>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Sub 2A</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Sub 2B</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Sub 2C</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Complex Nested Structure -->
<div class="uk-child-width-1-3@s" uk-grid>
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <h5>Parent Grid</h5>
      <div class="uk-child-width-1-2 uk-grid-collapse" uk-grid>
        <div>
          <div class="uk-card uk-card-primary uk-card-body">
            <p>Child A</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-primary uk-card-body">
            <p>Child B</p>
          </div>
        </div>
        <div class="uk-width-1-1">
          <div class="uk-card uk-card-secondary uk-card-body">
            <p>Full Width Child</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="uk-width-2-3@s">
    <div class="uk-card uk-card-default uk-card-body">
      <h5>Complex Nested Structure</h5>
      <!-- More nested grids here -->
    </div>
  </div>
</div>

5. Grid Alignment & Ordering

Example Preview

Vertical Middle

All items aligned to middle

Different heights

Vertical Bottom

Aligned to bottom

Different heights

Horizontal Center

Centered horizontally

Horizontal Right

Aligned to right

Last on Small+

Appears last on small screens and above

Middle Column

First on Small+

Appears first on small screens and above

Code:
<!-- Vertical Alignment -->
<!-- Middle Alignment -->
<div class="uk-child-width-1-3@s uk-flex-middle" uk-grid>
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <p>Vertical Middle</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <p>All items aligned to middle</p>
    </div>
  </div>
</div>

<!-- Bottom Alignment -->
<div class="uk-child-width-1-3@s uk-flex-bottom" uk-grid>
  <div>
    <div class="uk-card uk-card-primary uk-card-body">
      <p>Vertical Bottom</p>
    </div>
  </div>
</div>

<!-- Horizontal Alignment -->
<!-- Center Alignment -->
<div class="uk-child-width-1-3@s uk-flex-center" uk-grid>
  <div>
    <div class="uk-card uk-card-secondary uk-card-body">
      <p>Horizontal Center</p>
    </div>
  </div>
</div>

<!-- Right Alignment -->
<div class="uk-child-width-1-3@s uk-flex-right" uk-grid>
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <p>Horizontal Right</p>
    </div>
  </div>
</div>

<!-- Column Ordering -->
<div class="uk-child-width-1-3@s" uk-grid>
  <div class="uk-flex-last@s">
    <div class="uk-card uk-card-danger uk-card-body">
      <p>Last on Small+</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-danger uk-card-body">
      <p>Middle Column</p>
    </div>
  </div>
  <div class="uk-flex-first@s">
    <div class="uk-card uk-card-danger uk-card-body">
      <p>First on Small+</p>
    </div>
  </div>
</div>

Grid Classes Reference

Width Classes

ClassDescriptionBreakpoint
.uk-child-width-1-250% width (2 columns)All screens
.uk-child-width-1-333.33% width (3 columns)All screens
.uk-child-width-1-425% width (4 columns)All screens
.uk-child-width-1-2@s50% width on small screens+≥640px
.uk-child-width-1-3@m33.33% width on medium screens+≥960px
.uk-child-width-1-4@l25% width on large screens+≥1200px
.uk-child-width-expandExpand to fill available spaceAll screens
.uk-width-1-250% width for individual columnAll screens
.uk-width-2-366.66% width for individual columnAll screens
.uk-width-1-1100% width (full width)All screens

Spacing Classes

ClassDescriptionGap Size
.uk-grid-collapseNo gap between columns0px
.uk-grid-smallSmall gap between columns15px
.uk-grid-mediumMedium gap between columns30px
.uk-grid-largeLarge gap between columns40px

Alignment Classes

ClassDescriptionDirection
.uk-flex-topAlign items to topVertical
.uk-flex-middleAlign items to middleVertical
.uk-flex-bottomAlign items to bottomVertical
.uk-flex-leftAlign items to leftHorizontal
.uk-flex-centerAlign items to centerHorizontal
.uk-flex-rightAlign items to rightHorizontal
.uk-flex-stretchStretch items to fill containerVertical
.uk-flex-betweenDistribute items with space betweenHorizontal
.uk-flex-aroundDistribute items with space aroundHorizontal

Ordering Classes

ClassDescriptionBreakpoint
.uk-flex-firstOrder item firstAll screens
.uk-flex-lastOrder item lastAll screens
.uk-flex-first@sOrder item first on small screens+≥640px
.uk-flex-last@mOrder item last on medium screens+≥960px
.uk-flex-noneRemove flex orderingAll screens
.uk-flex-nowrapPrevent wrapping of flex itemsAll screens
.uk-flex-wrapAllow wrapping of flex itemsAll screens

Complete Real-World Examples

E-commerce Product Grid

<!-- Product Grid -->
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-child-width-1-5@xl uk-grid-medium" uk-grid>
  <!-- Product 1 -->
  <div>
    <div class="uk-card uk-card-default uk-card-hover">
      <div class="uk-card-media-top">
        <img src="product1.jpg" alt="Product Image">
        <div class="uk-position-top-right uk-margin-small-top uk-margin-small-right">
          <span class="uk-badge uk-badge-danger">Sale</span>
        </div>
      </div>
      <div class="uk-card-body">
        <h3 class="uk-card-title uk-text-small uk-margin-remove-bottom">Wireless Headphones</h3>
        <p class="uk-text-meta uk-margin-remove-top">Noise Cancelling</p>
        <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-top">
          <div class="uk-text-large uk-text-bold">$99.99</div>
          <button class="uk-button uk-button-primary uk-button-small">
            <span uk-icon="icon: cart"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Product 2 -->
  <div>
    <div class="uk-card uk-card-default uk-card-hover">
      <div class="uk-card-media-top">
        <img src="product2.jpg" alt="Product Image">
      </div>
      <div class="uk-card-body">
        <h3 class="uk-card-title uk-text-small uk-margin-remove-bottom">Smart Watch</h3>
        <p class="uk-text-meta uk-margin-remove-top">Fitness Tracker</p>
        <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-top">
          <div class="uk-text-large uk-text-bold">$199.99</div>
          <button class="uk-button uk-button-primary uk-button-small">
            <span uk-icon="icon: cart"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Add more products as needed -->
</div>

Blog Layout with Sidebar

<!-- Blog Layout -->
<div class="uk-grid-large" uk-grid>
  <!-- Main Content (2/3 width) -->
  <div class="uk-width-2-3@m">
    <!-- Featured Post -->
    <article class="uk-article uk-card uk-card-default uk-card-body uk-margin-bottom">
      <h1 class="uk-article-title">Getting Started with UIKit</h1>
      <p class="uk-article-meta">Written by John Doe on December 12, 2023</p>
      <p class="uk-text-lead">Learn how to build responsive layouts with UIKit's grid system.</p>
      <p>UIKit provides a powerful, mobile-first grid system that makes creating complex layouts simple...</p>
      <div class="uk-grid-small uk-child-width-auto" uk-grid>
        <div>
          <a class="uk-button uk-button-text" href="#">Read more</a>
        </div>
        <div>
          <a class="uk-button uk-button-text" href="#">5 Comments</a>
        </div>
      </div>
    </article>
    
    <!-- Post Grid -->
    <div class="uk-child-width-1-2@s uk-grid-medium" uk-grid>
      <!-- Post 1 -->
      <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-hover">
          <div class="uk-card-body">
            <h3 class="uk-card-title">CSS Grid vs Flexbox</h3>
            <p>Understanding when to use CSS Grid versus Flexbox for your layouts.</p>
            <a href="#" class="uk-button uk-button-text">Read Article</a>
          </div>
        </div>
      </div>
      
      <!-- Post 2 -->
      <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-hover">
          <div class="uk-card-body">
            <h3 class="uk-card-title">Responsive Design Tips</h3>
            <p>Best practices for creating truly responsive web designs.</p>
            <a href="#" class="uk-button uk-button-text">Read Article</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Sidebar (1/3 width) -->
  <div class="uk-width-1-3@m">
    <!-- About Card -->
    <div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
      <h3 class="uk-card-title">About This Blog</h3>
      <p>This blog covers web development, UI/UX design, and frontend technologies.</p>
    </div>
    
    <!-- Categories -->
    <div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
      <h3 class="uk-card-title">Categories</h3>
      <ul class="uk-list">
        <li><a href="#">Web Development</a></li>
        <li><a href="#">UI/UX Design</a></li>
        <li><a href="#">CSS Frameworks</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">Tutorials</a></li>
      </ul>
    </div>
    
    <!-- Newsletter -->
    <div class="uk-card uk-card-primary uk-card-body">
      <h3 class="uk-card-title">Subscribe</h3>
      <p>Get the latest articles delivered to your inbox.</p>
      <form class="uk-grid-small" uk-grid>
        <div class="uk-width-1-1">
          <input class="uk-input" type="email" placeholder="Your email">
        </div>
        <div class="uk-width-1-1">
          <button class="uk-button uk-button-default uk-width-1-1">Subscribe</button>
        </div>
      </form>
    </div>
  </div>
</div>

Dashboard Layout

<!-- Dashboard Layout -->
<div class="uk-grid-medium" uk-grid>
  <!-- Stats Row -->
  <div class="uk-width-1-1">
    <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-grid-small" uk-grid>
      <!-- Stat Card 1 -->
      <div>
        <div class="uk-card uk-card-primary uk-card-body">
          <div class="uk-flex uk-flex-between uk-flex-middle">
            <div>
              <div class="uk-text-large uk-text-bold">1,254</div>
              <div class="uk-text-small">Total Users</div>
            </div>
            <div>
              <span uk-icon="icon: users; ratio: 2"></span>
            </div>
          </div>
          <div class="uk-text-success uk-text-small">
            <span uk-icon="icon: arrow-up"></span> 12% from last month
          </div>
        </div>
      </div>
      
      <!-- Stat Card 2 -->
      <div>
        <div class="uk-card uk-card-secondary uk-card-body">
          <div class="uk-flex uk-flex-between uk-flex-middle">
            <div>
              <div class="uk-text-large uk-text-bold">$24,580</div>
              <div class="uk-text-small">Revenue</div>
            </div>
            <div>
              <span uk-icon="icon: credit-card; ratio: 2"></span>
            </div>
          </div>
          <div class="uk-text-success uk-text-small">
            <span uk-icon="icon: arrow-up"></span> 8% from last month
          </div>
        </div>
      </div>
      
      <!-- Add more stat cards -->
    </div>
  </div>
  
  <!-- Main Content Area -->
  <div class="uk-width-2-3@m">
    <!-- Chart Area -->
    <div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
      <h3 class="uk-card-title">Activity Overview</h3>
      <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-muted">
        <span class="uk-text-meta">Chart would go here</span>
      </div>
    </div>
    
    <!-- Recent Activity -->
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">Recent Activity</h3>
      <div class="uk-overflow-auto">
        <table class="uk-table uk-table-divider uk-table-small">
          <thead>
            <tr>
              <th>User</th>
              <th>Action</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>John Doe</td>
              <td>Created new project</td>
              <td>2 minutes ago</td>
            </tr>
            <!-- More rows -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  <!-- Sidebar -->
  <div class="uk-width-1-3@m">
    <!-- Quick Actions -->
    <div class="uk-card uk-card-default uk-card-body uk-margin-bottom">
      <h3 class="uk-card-title">Quick Actions</h3>
      <div class="uk-grid-small" uk-grid>
        <div class="uk-width-1-2">
          <button class="uk-button uk-button-primary uk-width-1-1">
            <span uk-icon="icon: plus" class="uk-margin-small-right"></span>
            Add New
          </button>
        </div>
        <div class="uk-width-1-2">
          <button class="uk-button uk-button-default uk-width-1-1">
            <span uk-icon="icon: download"></span>
            Export
          </button>
        </div>
      </div>
    </div>
    
    <!-- Recent Users -->
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">Recent Users</h3>
      <ul class="uk-list uk-list-divider">
        <li>
          <div class="uk-flex uk-flex-middle">
            <div class="uk-margin-small-right">
              <img class="uk-border-circle" width="40" height="40" src="avatar1.jpg" alt="Avatar">
            </div>
            <div>
              <div class="uk-text-bold">Alex Johnson</div>
              <div class="uk-text-meta uk-text-small">Online now</div>
            </div>
          </div>
        </li>
        <!-- More users -->
      </ul>
    </div>
  </div>
</div>

Custom Grid Styles

/* Custom Grid Styles */
/* Masonry Grid */
.uk-grid-masonry {
  column-count: 3;
  column-gap: 30px;
}

.uk-grid-masonry > * {
  break-inside: avoid;
  margin-bottom: 30px;
}

/* Equal Height Columns */
.uk-grid-equal-height {
  display: flex;
  flex-wrap: wrap;
}

.uk-grid-equal-height > * {
  display: flex;
}

.uk-grid-equal-height .uk-card {
  flex: 1;
}

/* Staggered Grid */
.uk-grid-staggered > *:nth-child(odd) {
  margin-top: 30px;
}

/* Gradient Background Grid */
.uk-grid-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 10px;
}

/* Card Deck Grid */
.uk-grid-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Glassmorphism Grid */
.uk-grid-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 20px;
}

/* Usage in HTML */
<div class="uk-grid-masonry" uk-grid>
  <div>Masonry item 1</div>
  <div>Masonry item 2</div>
  <div>Masonry item 3</div>
</div>

<div class="uk-grid-equal-height uk-child-width-1-3@s" uk-grid>
  <div>
    <div class="uk-card uk-card-default">
      <div class="uk-card-body">
        <p>All cards will have equal height</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-default">
      <div class="uk-card-body">
        <p>This card has more content but will match the height of other cards in the row.</p>
        <p>Additional paragraph to demonstrate equal height.</p>
      </div>
    </div>
  </div>
</div>

/* Responsive Column Count */
@media (min-width: 640px) {
  .uk-grid-custom {
    column-count: 2;
  }
}

@media (min-width: 960px) {
  .uk-grid-custom {
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .uk-grid-custom {
    column-count: 4;
  }
}

/* Animated Grid Items */
.uk-grid-animated > * {
  transition: all 0.3s ease;
}

.uk-grid-animated > *:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Grid with Dividers */
.uk-grid-divided {
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

.uk-grid-divided > * {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 20px;
}
Best Practices for Grid Layouts:
  • Always start with mobile-first responsive design
  • Use semantic HTML structure for grid containers
  • Maintain consistent spacing and gutters
  • Test layouts on multiple screen sizes and devices
  • Use appropriate breakpoints for different content types
  • Keep grid nesting to a maximum of 2-3 levels deep
  • Ensure proper alignment for better visual hierarchy
  • Use flex utilities for fine-grained control when needed
  • Consider accessibility with proper reading order
  • Optimize images and content for different grid sizes
  • Use CSS Grid for complex two-dimensional layouts
  • Maintain consistent column widths across related sections
Introduction →
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy