Grid

Responsive grid system

Grid System

Podo UI provides a responsive grid system. It automatically adjusts to 12 columns on PC, 6 columns on tablet, and 4 columns on mobile.

PC (1280px~)

12-column grid

Tablet (768px~1279px)

6-column grid

Mobile (~767px)

4-column grid

Basic Grid

Use the grid class to create an automatic responsive grid:

HTML

<section class="grid">
  <div class="w-4">4 columns (33.33%)</div>
  <div class="w-4">4 columns (33.33%)</div>
  <div class="w-4">4 columns (33.33%)</div>
  <div class="w-6">6 columns (50%)</div>
  <div class="w-6">6 columns (50%)</div>
  <div class="w-12">12 columns (100%)</div>
</section>

Live Example:

w-4

w-6

w-12

Grid Column Sizes

You can use w-1 through w-12:

All Column Sizes:

w-12 (100%)

w-11

w-1

w-10

w-2

w-9

w-3

w-8

w-4

w-7

w-5

w-6

Fixed Column Grid

You can create grids with fixed column counts using grid-fix-N classes (2-6 columns):

HTML

<!-- 2-column fixed grid -->
<section class="grid grid-fix-2">
  <div class="w-1_2">50%</div>
  <div class="w-1_2">50%</div>
</section>

<!-- 3-column fixed grid -->
<section class="grid grid-fix-3">
  <div class="w-1_3">33.33%</div>
  <div class="w-2_3">66.67%</div>
</section>

<!-- 4-column fixed grid -->
<section class="grid grid-fix-4">
  <div class="w-1_4">25%</div>
  <div class="w-3_4">75%</div>
</section>

2-column fixed (grid-fix-2):

w-1_2 (50%)

3-column fixed (grid-fix-3):

w-1_3

w-2_3

4-column fixed (grid-fix-4):

w-1_4

w-2_4

5-column fixed (grid-fix-5):

w-2_5

w-3_5

6-column fixed (grid-fix-6):

w-2_6

w-4_6

Full Width

The w-full class takes the full width of the current grid:

HTML

<section class="grid">
  <div class="w-4">4 columns</div>
  <div class="w-4">4 columns</div>
  <div class="w-4">4 columns</div>
  <div class="w-full">Full width (PC: 12 columns, Tablet: 6 columns, Mobile: 4 columns)</div>
</section>

Live Example:

w-4

w-full

Responsive Behavior

The grid automatically adjusts based on screen size. Try resizing your browser window to see it in action:

Breakpoints:

PC: 1280px and above (12-column grid, 24px gap)
Tablet: 768px ~ 1279px (6-column grid, 16px gap)
Mobile: 767px and below (4-column grid, 16px gap)