Layout

Layout components for creating consistent page structures and containers.

Container

Use containers to center and horizontally pad your content.

Container Example

This content is centered with max-width and horizontal padding.

<div class="container">
    <!-- Your content here -->
  </div>

CSS Implementation:

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
  }

Grid System

Create responsive layouts using CSS Grid.

Column 1

Column 2

Column 3

<div style="
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  ">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
  </div>

Flexbox Layouts

Use flexbox for one-dimensional layouts.

Flex Item

Flex Item (2x)

Flex Item

<div style="
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  ">
    <div style="flex: 1;">Flex Item</div>
    <div style="flex: 2;">Flex Item (2x)</div>
    <div style="flex: 1;">Flex Item</div>
  </div>

Sidebar Layout

Common sidebar layout pattern.

Main Content

This is the main content area that adapts to available space.

<div style="display: flex; min-height: 100vh;">
    <aside style="width: 250px; background: #f8f9fa;">
      <!-- Sidebar content -->
    </aside>
    <main style="flex: 1;">
      <!-- Main content -->
    </main>
  </div>

Card Grid Layout

Responsive grid for card components.

Card 1

Card content with consistent spacing.

Card 2

Another card in the grid layout.

Card 3

Third card completing the grid.

<div style="
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  ">
    <div class="ethio-card">...</div>
    <div class="ethio-card">...</div>
    <div class="ethio-card">...</div>
  </div>

Responsive Breakpoints

EthioWDS uses common breakpoints for responsive design:

Mobile: < 640px

Tablet: 640px - 768px

Desktop: 768px - 1024px

Large: > 1024px

/* Responsive breakpoints */
  @media (min-width: 640px) {
    /* Tablet styles */
  }
  
  @media (min-width: 768px) {
    /* Desktop styles */
  }
  
  @media (min-width: 1024px) {
    /* Large desktop styles */
  }