Hello, I'm Shrijith. I'm building git-lrc, an AI code reviewer that runs on every commit. It is free, unlimited, and source-available on Github. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product.
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.
```html
Float Layout
.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;
}
Sidebar Content
Main Content
```
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
## 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.
```html
Flexbox Layout
.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;
}
Card 1
Card 2
Card 3
Card 4
```
### 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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
## 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.
```html
Grid Layout
.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; }
Header
Sidebar
Main Content
Footer
```
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
## 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.
```html
Inline-Block Layout
.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;
}
Home
About
Contact
```
### 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 `
` 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.
```html
Table Display Layout
.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;
}
Name
Email
```
### 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`.
```html
Position Layout
.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;
}
Modal Title
This is a centered modal.
### 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](https://developer.mozilla.org/en-US/docs/Web/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.
```html
<!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. -->
Key Points
Use column-gap for spacing and column-rule for dividers.
Limited control over content flow—best for simple text layouts.
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.
*AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.*
Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.
Free, Unlimited AI Code Reviews That Run on Commit
AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.
See It In Action
See git-lrc catch serious security issues such as leaked credentials, expensive cloud
operations, and sensitive material in log statements
git-lrc-intro-60s.mp4
Why
🤖 AI agents silently break things. Code removed. Logic changed. Edge cases gone. You won't notice until production.
🔍 Catch it before it ships. AI-powered inline comments show you exactly what changed and what looks wrong.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Top comments (1)
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.