Comparison of Flexbox, Grid, and Column Layouts
This article explains the comparison between Flexbox, Grid, and Column Layouts.
You will learn the differences between Flexbox, Grid, and Column Layouts, and when to use each.
YouTube Video
HTML for Preview
css-layout-comparision.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>Comparison of Flexbox, Grid, and Column Layouts
CSS flex, grid, and columns are all techniques for aligning and laying out elements, but each has its own strengths and ideal use cases. Below is a clear explanation of their differences through comparison.
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}Features
- Suitable for one-directional layouts—either horizontal or vertical.
- Allows flexible control over the order and flexibility of elements.
- Best suited for small-scale layouts like navigation bars and groups of buttons.
Advantages
- Automatically adjusts the size of child elements.
- You can change the order of elements using properties like
flex-direction,flex-wrap, andorder.
Example of changing display order
flex-direction
As an example of changing the display order, let's set the flex-direction property to column.
1.flex-container {
2 flex-direction: column;
3}When flex-direction is set to column, the items change from a horizontal layout to a vertical one. The layout changes from left-to-right to top-to-bottom.
flex-wrap
Setting wrap-reverse for the flex-wrap property reverses the order of wrapped lines from the usual direction.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}In this way, the lines are displayed stacking from bottom to top.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}When flex-direction is set to column and flex-wrap is set to wrap-reverse, items are arranged vertically while columns wrap from right to left. As in this example, the column order is reversed from the usual left-to-right, and items are added from right to left.
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16}Features
- Ideal for two-dimensional layouts.
- Allows clear definition of grid-based layouts.
- Great for more complex designs and overall page structure.
Advantages
- Rows and columns can be defined simultaneously.
- Sections can be placed using named areas (
grid-area). - Child elements can be placed freely within the grid, allowing flexible control of order.
Example of changing display order
As an example of changing display order, let's use the grid-template-areas property to set the display positions.
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }In this example, the grid-template-areas property is used to visually define the overall grid layout and assign area names to each cell. Then, by assigning the corresponding grid-area name to each child element, they are placed in the desired positions. By using grid in this way, you can not only freely change the display order of elements but also easily create complex and unique layouts.
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}Features
- You can easily create magazine-style columns.
- Ideal for flowing text content.
- Follows the HTML source order, making it less suitable for controlling element order.
Advantages
- Can automatically divide long text.
- You can very easily create newspaper-style layouts.
Comparison Table
| Feature / Use Case | Flexbox | Grid | Columns |
|---|---|---|---|
| Layout Dimension | 1D (horizontal or vertical) | 2D (horizontal & vertical) | 1D (vertical) |
| Best For | Component alignment | Full page structure | Multi-column text |
| Layout Flexibility | High (order & size) | Very High (area definition) | Low (auto-split only) |
| Control of Children | Flexible | Clearly defined | Hard to control |
| Layout Intention | Content-driven | Layout-driven | Text-driven |
Summary
- Flexbox is ideal when you want to align elements in a row, such as headers or card lists.
- Grid is suitable when you want to design the entire layout, such as the structure of a web page.
- Columns are best when you want to format text into multiple columns, such as in articles or blogs.
You can also combine them as needed. For example, you can design the overall layout with Grid and align internal elements with Flex.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.