DEV Community

Shrijith Venkatramana
Shrijith Venkatramana

Posted on

4 2 2 2 2

Exploring CSS Layouts: Your Guide to Commonly Used Techniques

#webdev #beginners #tutorial #css

Hi there! I'm Shrijith Venkatrama, founder of Hexmos. Right now, I’m building LiveAPI, a tool that makes generating API docs from your code ridiculously easy.

CSS layouts are the backbone of web design. They control how elements are arranged on a page, making your site functional and visually appealing. Whether you're building a simple blog or a complex dashboard, choosing the right layout technique is critical. This guide dives into the most commonly used CSS layout methods, with detailed examples, tables, and tips to help you understand and apply them effectively.

We'll cover 7 key layout techniques, each with practical code you can copy and run. Expect clear explanations, minimal fluff, and a focus on what works for developers. Let’s get started.

1. Why CSS Layouts Matter

Before jumping into code, let’s talk about why layouts are a big deal. A good layout ensures your content is accessible, responsive, and easy to navigate. CSS provides multiple ways to achieve this, from old-school floats to modern flexbox and grid. Each method has its strengths, and knowing when to use them saves time and frustration.

Here’s a quick comparison of the layout techniques we’ll cover:

Technique Best For Browser Support Complexity
Floats Legacy layouts, simple designs Excellent Low
Flexbox Single-axis layouts, dynamic spacing Excellent Medium
CSS Grid Complex, two-dimensional layouts Excellent Medium-High
Inline-Block Simple, inline layouts Excellent Low
Table Display Table-like structures Excellent Low
Position Overlays, precise positioning Excellent Medium
Multi-Column Magazine-style text layouts Good Medium

This table sets the stage for what’s coming. Let’s dive into each technique with examples.

2. Floats: The Classic Layout Approach

Floats were the go-to for layouts before flexbox and grid. They’re still used in legacy projects or for specific cases like wrapping text around images. Floats move elements left or right, letting content flow around them.

Example: Two-Column Layout with Floats

Here’s a simple two-column layout using floats. The left column is fixed-width, and the right column takes the remaining space.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Float Layout</title>
  <style>
    .container {
      width: 100%;
      overflow: auto; /* Clearfix for floated children */
    }
    .sidebar {
      float: left;
      width: 200px;
      background: #f0f0f0;
      padding: 10px;
    }
    .content {
      margin-left: 220px; /* Space for sidebar */
      padding: 10px;
      background: #e0e0e0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">Sidebar Content</div>
    <div class="content">Main Content</div>
  </div>
</body>
</html>
<!-- Output: A two-column layout with a fixed 200px sidebar on the left and main content on the right. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Use overflow: auto on the parent to clear floated children.
  • Floats can be tricky with responsive designs—media queries are often needed.
  • Avoid floats for complex layouts; flexbox or grid is better.

Resource: MDN on CSS Floats

3. Flexbox: Flexible and Dynamic Layouts

Flexbox is a game-changer for single-axis layouts. It’s perfect for aligning items in a row or column, with dynamic sizing and responsive behavior. Flexbox shines in navigation bars, card layouts, or centering content.

Example: Responsive Card Layout with Flexbox

This example creates a responsive card layout that wraps cards onto new lines as the screen size changes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Layout</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    .card {
      flex: 1 1 200px; /* Grow, shrink, basis */
      background: #f0f0f0;
      padding: 15px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </div>
</body>
</html>
<!-- Output: Cards arranged in a row, wrapping to new lines on smaller screens. Each card is at least 200px wide. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Use flex-wrap: wrap for responsive layouts.
  • The gap property simplifies spacing between flex items.
  • Flexbox is ideal for one-dimensional layouts but less suited for grids.

Resource: CSS-Tricks Flexbox Guide

4. CSS Grid: Mastering Two-Dimensional Layouts

CSS Grid is the go-to for complex, two-dimensional layouts. It lets you define rows and columns, making it ideal for dashboards, galleries, or full-page layouts. Grid is powerful but has a steeper learning curve.

Example: Dashboard Layout with CSS Grid

This example creates a dashboard with a header, sidebar, main content, and footer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid Layout</title>
  <style>
    .container {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      grid-template-columns: 200px 1fr;
      grid-template-rows: auto 1fr auto;
      height: 100vh;
      gap: 10px;
    }
    .header { grid-area: header; background: #d0d0d0; padding: 20px; }
    .sidebar { grid-area: sidebar; background: #e0e0e0; padding: 20px; }
    .main { grid-area: main; background: #f0f0f0; padding: 20px; }
    .footer { grid-area: footer; background: #d0d0d0; padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>
<!-- Output: A full-page dashboard with a header, fixed-width sidebar, main content, and footer. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Use grid-template-areas for readable layout definitions.
  • Grid excels at responsive designs with minimal media queries.
  • Combine with fr units for flexible sizing.

Resource: MDN CSS Grid

5. Inline-Block: Simple and Inline Layouts

The display: inline-block property is a lightweight way to create layouts where elements sit inline but respect width and height. It’s great for simple navigation menus or small components.

Example: Inline-Block Navigation Menu

This example creates a horizontal navigation menu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Inline-Block Layout</title>
  <style>
    .nav {
      font-size: 0; /* Remove inline-block spacing */
    }
    .nav-item {
      display: inline-block;
      font-size: 16px;
      padding: 10px 20px;
      background: #f0f0f0;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Contact</div>
  </div>
</body>
</html>
<!-- Output: A horizontal navigation menu with evenly spaced items. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Set font-size: 0 on the parent to remove unwanted spacing between items.
  • Inline-block is less flexible than flexbox for complex layouts.
  • Use for small-scale layouts to avoid overcomplicating.

6. Table Display: Structured, Table-Like Layouts

The display: table property mimics HTML table behavior without semantic <table> elements. It’s useful for form layouts or aligning content in a grid-like structure.

Example: Form Layout with Table Display

This example aligns form labels and inputs in a clean, table-like structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table Display Layout</title>
  <style>
    .form {
      display: table;
      width: 100%;
    }
    .form-row {
      display: table-row;
    }
    .form-label, .form-input {
      display: table-cell;
      padding: 10px;
    }
    .form-label {
      width: 150px;
      background: #f0f0f0;
    }
    .form-input input {
      width: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="form">
    <div class="form-row">
      <div class="form-label">Name</div>
      <div class="form-input"><input type="text"></div>
    </div>
    <div class="form-row">
      <div class="form-label">Email</div>
      <div class="form-input"><input type="email"></div>
    </div>
  </div>
</body>
</html>
<!-- Output: A form with aligned labels and inputs, resembling a table structure. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Use for rigid, table-like layouts where alignment is critical.
  • Less flexible for responsive designs compared to grid or flexbox.
  • Avoid for non-tabular data to maintain semantic HTML.

7. Position: Precise Control for Overlays

The position property (absolute, fixed, relative, sticky) is used for precise element placement, like modals, tooltips, or sticky headers. It’s not a full layout system but complements others.

Example: Modal Overlay with Absolute Positioning

This example creates a centered modal using position: absolute.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Position Layout</title>
  <style>
    .modal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    body {
      position: relative;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>This is a centered modal.</p>
  </div>
</body>
</html>
<!-- Output: A modal centered in the viewport, regardless of scroll position. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Use transform: translate(-50%, -50%) for perfect centering.
  • Absolute positioning removes elements from the normal flow—watch for overlaps.
  • Combine with other layouts for complex designs.

Resource: MDN on CSS Position

8. Multi-Column: Magazine-Style Text Layouts

The column-count and related properties create magazine-style text layouts where content flows into multiple columns. It’s great for articles or long text blocks.

Example: Multi-Column Article Layout

This example splits text into three columns.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multi-Column Layout</title>
  <style>
    .article {
      column-count: 3;
      column-gap: 40px;
      column-rule: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="article">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>
</html>
<!-- Output: Text split into three columns with a vertical rule between them. -->
Enter fullscreen mode Exit fullscreen mode

Key Points

  • Use column-gap for spacing and column-rule for dividers.
  • Limited control over content flow—best for simple text layouts.
  • Check browser support for older devices.

Resource: MDN on CSS Columns

Final Thoughts

Each CSS layout technique has its place. Floats and inline-block work for simple or legacy projects. Flexbox and Grid are your go-to for modern, responsive designs. Table display, position, and multi-column handle niche cases like forms, overlays, or text-heavy layouts. Experiment with these examples, tweak them, and combine them to fit your project’s needs.

Copy the code, run it, and see what works best. If you’re stuck, the linked resources from MDN and CSS-Tricks are goldmines for deeper dives. Keep building, and you’ll master CSS layouts in no time.

Tiugo Technologies
 Promoted

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (1)

Collapse
 
auvitijuana profile image
auvitijuana •

I love and use Flexbox for everything—especially when nesting elements—and I handle the final touches with positioning and transform, especially for responsive layouts.

It’s simply the best. I like Grid, but I don’t really use it because there’s always some insurmountable issue, and it often requires tons of media queries to achieve the responsiveness that comes naturally with Flexbox and its powerful set of utilities.

And if I may say… when gap support was finally added to Flexbox, I literally celebrated with cake and a piñata.

Datadog
 Promoted

Image of Datadog

Keep your GPUs in check

This cheatsheet shows how to use Datadog’s NVIDIA DCGM and Triton integrations to track GPU health, resource usage, and model performance—helping you optimize AI workloads and avoid hardware bottlenecks.

Get the Cheatsheet

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay