Layout systems control how elements are arranged on a webpage.
Modern websites use layout systems to build navigation bars, dashboards, galleries, landing pages, and responsive layouts.
CSS provides several layout systems:
Flow Layout is the default layout system in CSS.
Elements appear in the same order they are written in the HTML document.
Example:
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
Output:
Heading
Paragraph 1
Paragraph 2
Block elements appear vertically.
<div></div>
<p></p>
<section></section>
Inline elements appear on the same line.
<span>Hello</span>
<span>World</span>
Output:
Hello World
Flow Layout is:
Before Flexbox and Grid, layouts were commonly built using floats.
The float property moves elements to the left or right.
float: left;
or
float: right;
Example:
.box {
float: left;
width: 200px;
}
<div class="box">Box 1</div>
<div class="box">Box 2</div>
Output:
[Box 1][Box 2]
Floats are still useful for wrapping text around images.
img {
float: left;
margin-right: 20px;
}
To stop floating elements, use:
clear: both;
Example:
.footer {
clear: both;
}
Floats have several drawbacks:
Modern layouts usually use Flexbox or Grid instead.
CSS can automatically split text into multiple columns.
Useful for articles, blogs, and magazines.
Example:
.article {
column-count: 2;
}
Three columns:
.article {
column-count: 3;
}
Spacing between columns:
column-gap: 40px;
Column divider:
column-rule: 1px solid #ddd;
Example:
.article {
column-count: 2;
column-gap: 40px;
column-rule: 1px solid #ddd;
}
Flexbox is a one-dimensional layout system.
It arranges items in either rows or columns.
Create a flex container:
.container {
display: flex;
}
Example:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Output:
1 2 3
Controls the main axis.
Row (default):
flex-direction: row;
Output:
1 2 3
Column:
flex-direction: column;
Output:
1
2
3
Aligns items along the main axis.
Center:
justify-content: center;
Space Between:
justify-content: space-between;
Space Around:
justify-content: space-around;
Space Evenly:
justify-content: space-evenly;
Aligns items along the cross axis.
align-items: center;
align-items: flex-start;
align-items: flex-end;
Adds spacing between flex items.
gap: 20px;
Example:
.container {
display: flex;
gap: 20px;
}
Allows items to move onto multiple lines.
.container {
display: flex;
flex-wrap: wrap;
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
Common uses include:
CSS Grid is a two-dimensional layout system.
Unlike Flexbox, Grid controls both rows and columns.
Create a grid container:
.container {
display: grid;
}
Create columns using grid-template-columns.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Output:
+----+----+----+
| 1 | 2 | 3 |
+----+----+----+
fr)Grid introduces the fr unit.
grid-template-columns: 1fr 2fr;
The second column receives twice as much space as the first.
Spacing between rows and columns.
gap: 20px;
grid-template-rows: 100px 100px;
Instead of:
grid-template-columns:
1fr 1fr 1fr 1fr;
Use:
grid-template-columns:
repeat(4, 1fr);
Items can span multiple columns.
.item {
grid-column: 1 / 3;
}
Example:
.container {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
Common uses include:
| Flexbox | Grid |
|---|---|
| One-dimensional | Two-dimensional |
| Rows or Columns | Rows and Columns |
| Component Layouts | Page Layouts |
| Simpler | More Powerful |
Flexbox works well for:
Example:
.navbar {
display: flex;
justify-content: space-between;
}
Grid is better for:
Example:
.dashboard {
display: grid;
grid-template-columns:
250px 1fr;
}
.container {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
Modern websites primarily use Flexbox and CSS Grid for layouts.
/* Component Layout */
display: flex;
/* Page Layout */
display: grid;
Typical use cases: