We use cookies to enhance your experience on the site
Creating a Grid with Flexbox
The ancient Egyptians were masters of space planning - from symmetrical columns in temples to precise divisions of farmland along the Nile. Creating a grid using Flexbox is the modern equivalent of this skill. We'll analyze step by step how to build a responsive grid layout with flexible columns defined in percentages, similar to frameworks like Bootstrap or Tailwind CSS.
Step 1: Create a Basic HTML Document Structure
First, create a new HTML file and add a basic HTML document structure. Add a
<div>.flex-grid<div>.col1<!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 <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7 <title>Creating a Grid with Flexbox</title>
8</head>
9<body>
10 <div class="flex-grid">
11 <div class="col col-6">Column 1</div>
12 <div class="col col-6">Column 2</div>
13 </div>
14 <div class="flex-grid">
15 <div class="col col-4">Column 1</div>
16 <div class="col col-4">Column 2</div>
17 <div class="col col-4">Column 3</div>
18 </div>
19 <div class="flex-grid">
20 <div class="col col-3">Column 1</div>
21 <div class="col col-3">Column 2</div>
22 <div class="col col-3">Column 3</div>
23 <div class="col col-3">Column 4</div>
24 </div>
25</body>
26</html>Step 2: Create a CSS File
Open or create a new CSS file and save it as
styles.cssStep 3: Basic Styling
Add basic styles for the
.flex-grid.col1body {
2 font-family: Arial, sans-serif;
3 margin: 0;
4 padding: 0;
5 display: flex;
6 justify-content: center;
7 align-items: center;
8 flex-direction: column;
9 gap: 20px;
10 min-height: 100vh;
11 background-color: #f0f0f0;
12}
13
14.flex-grid {
15 display: flex;
16 flex-wrap: wrap;
17 width: 80%;
18 background-color: #fff;
19 border: 1px solid #ddd;
20 padding: 10px;
21 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22 gap: 10px;
23}
24
25.col {
26 background-color: lightblue;
27 padding: 20px;
28 text-align: center;
29 border: 1px solid #ccc;
30}Step 4: Creating Column Classes with Percentage Values
Add styles for the
.col-1.col-2.col-3.col-4.col-5.col-61.col-1 {
2 flex-basis: 8.33333333%;
3 max-width: 8.33333333%;
4}
5
6.col-2 {
7 flex-basis: 16.66666667%;
8 max-width: 16.66666667%;
9}
10
11.col-3 {
12 flex-basis: 25%;
13 max-width: 25%;
14}
15
16.col-4 {
17 flex-basis: 33.33333333%;
18 max-width: 33.33333333%;
19}
20
21.col-5 {
22 flex-basis: 41.66666667%;
23 max-width: 41.66666667%;
24}
25
26.col-6 {
27 flex-basis: 50%;
28 max-width: 50%;
29}
30
31.col-7 {
32 flex-basis: 58.33333333%;
33 max-width: 58.33333333%;
34}
35
36.col-8 {
37 flex-basis: 66.66666667%;
38 max-width: 66.66666667%;
39}
40
41.col-9 {
42 flex-basis: 75%;
43 max-width: 75%;
44}
45
46.col-10 {
47 flex-basis: 83.33333333%;
48 max-width: 83.33333333%;
49}
50
51.col-11 {
52 flex-basis: 91.66666667%;
53 max-width: 91.66666667%;
54}
55
56.col-12 {
57 flex-basis: 100%;
58 max-width: 100%;
59}Step 5: Responsive Columns
To make the grid responsive, we can use media queries and change Flexbox properties depending on the screen width.
1@media (max-width: 768px) {
2 .flex-grid {
3 flex-direction: column;
4 }
5
6 .col {
7 flex: none;
8 width: 100%;
9 }
10}Result
After completing all the steps, your HTML and CSS files should look as follows:
HTML File (index.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 <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7 <title>Creating a Grid with Flexbox</title>
8</head>
9<body>
10 <div class="flex-grid">
11 <div class="col col-6">Column 1</div>
12 <div class="col col-6">Column 2</div>
13 </div>
14 <div class="flex-grid">
15 <div class="col col-4">Column 1</div>
16 <div class="col col-4">Column 2</div>
17 <div class="col col-4">Column 3</div>
18 </div>
19 <div class="flex-grid">
20 <div class="col col-3">Column 1</div>
21 <div class="col col-3">Column 2</div>
22 <div class="col col-3">Column 3</div>
23 <div class="col col-3">Column 4</div>
24 </div>
25</body>
26</html>CSS File (styles.css)
1body {
2 font-family: Arial, sans-serif;
3 margin: 0;
4 padding: 0;
5 display: flex;
6 justify-content: center;
7 align-items: center;
8 flex-direction: column;
9 gap: 20px;
10 min-height: 100vh;
11 background-color: #f0f0f0;
12}
13
14.flex-grid {
15 display: flex;
16 flex-wrap: wrap;
17 width: 80%;
18 background-color: #fff;
19 border: 1px solid #ddd;
20 padding: 10px;
21 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22 gap: 10px;
23}
24
25.col {
26 background-color: lightblue;
27 padding: 20px;
28 text-align: center;
29 border: 1px solid #ccc;
30}
31
32.col-1 {
33 flex-basis: 8.33333333%;
34 max-width: 8.33333333%;
35}
36
37.col-2 {
38 flex-basis: 16.66666667%;
39 max-width: 16.66666667%;
40}
41
42.col-3 {
43 flex-basis: 25%;
44 max-width: 25%;
45}
46
47.col-4 {
48 flex-basis: 33.33333333%;
49 max-width: 33.33333333%;
50}
51
52.col-5 {
53 flex-basis: 41.66666667%;
54 max-width: 41.66666667%;
55}
56
57.col-6 {
58 flex-basis: 50%;
59 max-width: 50%;
60}
61
62.col-7 {
63 flex-basis: 58.33333333%;
64 max-width: 58.33333333%;
65}
66
67.col-8 {
68 flex-basis: 66.66666667%;
69 max-width: 66.66666667%;
70}
71
72.col-9 {
73 flex-basis: 75%;
74 max-width: 75%;
75}
76
77.col-10 {
78 flex-basis: 83.33333333%;
79 max-width: 83.33333333%;
80}
81
82.col-11 {
83 flex-basis: 91.66666667%;
84 max-width: 91.66666667%;
85}
86
87.col-12 {
88 flex-basis: 100%;
89 max-width: 100%;
90}
91
92@media (max-width: 768px) {
93 .flex-grid {
94 flex-direction: column;
95 }
96
97 .col {
98 flex: none;
99 width: 100%;
100 }
101}Additional Task
- Add more columns and experiment with different
andflex-basis
values to see how the grid layout changes.max-width - Test your skills by creating more complex layouts using different combinations of Flexbox properties.
- Add different styles to your grid, such as changing colors, font sizes, and other element properties to better understand how the different Flexbox options work.
Try creating a Flexbox grid in the editor below: