HTML and CSS course · Module 8: CSS Grid
CSS Grid: The Modern Page Layout System
In this lesson3
CSS Grid is a powerful layout system that gives web developers control over the arrangement of elements both horizontally and vertically. It is an incredibly flexible tool that can significantly simplify the process of designing responsive user interfaces.
CSS Grid Basics
Grid is a two-dimensional layout system, which means you can control elements in both columns and rows. Here are some fundamental concepts:
Grid Container
To define a grid container, use the property display: grid or display: inline-grid.
1.container {
2 display: grid;
3}Columns and Rows
You define columns and rows using the grid-template-columns and grid-template-rows properties. These values can be specified in various units, such as pixels, percentages, or fractions (fr).
1.container {
2 display: grid;
3 grid-template-columns: 1fr 2fr 1fr;
4 grid-template-rows: 100px 200px;
5}Grid Gaps
You can also define spacing between columns and rows using the grid-gap, grid-row-gap, and grid-column-gap properties.
1.container {
2 grid-gap: 10px;
3 grid-row-gap: 15px;
4 grid-column-gap: 15px;
5}Grid Items
Elements inside a grid container are automatically treated as grid items. You can place them in specific columns and rows using the grid-column and grid-row properties.
1.item {
2 grid-column: 1 / 3;
3 grid-row: 2 / 4;
4}Advanced CSS Grid Applications
Grid Areas
Grid allows you to name areas, which can simplify layout management.
1.container {
2 grid-template-areas:
3 "header header header"
4 "menu content sidebar"
5 "footer footer footer";
6}
7.header {
8 grid-area: header;
9}Responsiveness
Thanks to flexible units and media queries, CSS Grid is perfect for creating responsive layouts.
1.container {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4}Nesting
You can also nest grid containers, which enables the creation of more complex layouts.
Building a layout with CSS Grid can be compared to constructing a pyramid. Just as ancient pyramids were built from precisely arranged stone blocks, a grid structure consists of precisely defined columns and rows.
- Grid Container: It's like the foundation of a pyramid, on which the entire structure rests.
- Columns and Rows: They are like the individual layers of stones that form the pyramid's structure.
- Grid Items: They are like individual stones, each precisely placed in the correct position.
Pros and Cons
Pros:
- Flexibility: Grid offers unmatched flexibility in creating diverse layouts.
- Clean Code: It enables the creation of complex layouts without unnecessary HTML and CSS code.
- Ease of Use: Once understood, grid is simple to use and efficient.
Cons:
- Compatibility: Not all browsers support every CSS Grid feature, although this situation is constantly improving.
- Learning Curve: For some users, the initial learning process can be challenging.
CSS Grid is a powerful tool that significantly changes the way designers and developers can create web page layouts. It offers many advanced features and flexibility that can be used to create sophisticated and responsive user interfaces. The pyramid-building analogy highlights the precision and solidity that are key to understanding and effectively using this tool.
Code for this lesson: 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 <title>CSS Grid - Basics and Advanced Techniques</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>CSS Grid - The Complete Guide</h1>
12
13 <section class="demo-section">
14 <h2>Basic Grid Container</h2>
15 <div class="basic-grid">
16 <div class="grid-item">Item 1</div>
17 <div class="grid-item">Item 2</div>
18 <div class="grid-item">Item 3</div>
19 <div class="grid-item">Item 4</div>
20 <div class="grid-item">Item 5</div>
21 <div class="grid-item">Item 6</div>
22 </div>
23 <p class="description">Grid with 3 columns and automatic rows</p>
24 </section>
25
26 <section class="demo-section">
27 <h2>Grid with Fractions (fr)</h2>
28 <div class="fraction-grid">
29 <div class="grid-item">1fr</div>
30 <div class="grid-item">2fr</div>
31 <div class="grid-item">1fr</div>
32 </div>
33 <p class="description">Columns: 1fr 2fr 1fr - middle column is 2x wider</p>
34 </section>
35
36 <section class="demo-section">
37 <h2>Grid Areas (Named Areas)</h2>
38 <div class="areas-grid">
39 <div class="header">Header</div>
40 <div class="sidebar">Sidebar</div>
41 <div class="content">Main Content</div>
42 <div class="footer">Footer</div>
43 </div>
44 <p class="description">Layout with named areas: header, sidebar, content, footer</p>
45 </section>
46
47 <section class="demo-section">
48 <h2>Grid Gap (Spacing)</h2>
49 <div class="gap-grid">
50 <div class="grid-item">Item 1</div>
51 <div class="grid-item">Item 2</div>
52 <div class="grid-item">Item 3</div>
53 <div class="grid-item">Item 4</div>
54 </div>
55 <p class="description">Grid with gap: 20px between elements</p>
56 </section>
57
58 <section class="demo-section">
59 <h2>Responsive Grid with auto-fit</h2>
60 <div class="responsive-grid">
61 <div class="card">Card 1</div>
62 <div class="card">Card 2</div>
63 <div class="card">Card 3</div>
64 <div class="card">Card 4</div>
65 <div class="card">Card 5</div>
66 <div class="card">Card 6</div>
67 </div>
68 <p class="description">repeat(auto-fit, minmax(200px, 1fr)) - automatic adjustment</p>
69 </section>
70
71 <section class="demo-section">
72 <h2>Nested Grid</h2>
73 <div class="nested-parent">
74 <div class="nested-item">Item 1</div>
75 <div class="nested-item nested-grid">
76 <div class="nested-child">Sub 1</div>
77 <div class="nested-child">Sub 2</div>
78 <div class="nested-child">Sub 3</div>
79 <div class="nested-child">Sub 4</div>
80 </div>
81 <div class="nested-item">Item 3</div>
82 </div>
83 <p class="description">Grid nested inside a grid element</p>
84 </section>
85
86 <section class="demo-section">
87 <h2>Grid Line Positioning</h2>
88 <div class="positioned-grid">
89 <div class="positioned-item span-item">Spans 2 columns</div>
90 <div class="positioned-item">Item 2</div>
91 <div class="positioned-item">Item 3</div>
92 <div class="positioned-item tall-item">Tall Item</div>
93 <div class="positioned-item">Item 5</div>
94 </div>
95 <p class="description">Precise element positioning using grid lines</p>
96 </section>
97
98 <section class="demo-section">
99 <h2>CSS Grid with CSS Custom Properties</h2>
100 <div class="custom-props-grid">
101 <div class="custom-item">Dynamic 1</div>
102 <div class="custom-item">Dynamic 2</div>
103 <div class="custom-item">Dynamic 3</div>
104 <div class="custom-item">Dynamic 4</div>
105 </div>
106 <p class="description">Grid using CSS Custom Properties (variables)</p>
107 </section>
108
109 <section class="demo-section">
110 <h2>Advanced Layout - Dashboard</h2>
111 <div class="dashboard-grid">
112 <div class="dash-header">Dashboard Header</div>
113 <div class="dash-nav">Navigation</div>
114 <div class="dash-main">
115 <div class="dash-widget">Widget 1</div>
116 <div class="dash-widget">Widget 2</div>
117 <div class="dash-widget">Widget 3</div>
118 <div class="dash-widget">Widget 4</div>
119 </div>
120 <div class="dash-sidebar">Sidebar</div>
121 <div class="dash-footer">Footer</div>
122 </div>
123 <p class="description">A complete dashboard layout built with grid</p>
124 </section>
125 </div>
126</body>
127</html>Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. How do you create a CSS Grid container?
2. Which property defines columns in CSS Grid?
These are 2 of 3 questions for this lesson. Solve the rest in the game.
Hands-on tasks in the game
- Code editor
Create .temple-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 15px }. Add 9 .stone elements. Result: an even 3x3 grid like the foundations of Abu Simbel!
- Horizontal ordering
Arrange the grid-template-columns declaration with a 1:2:1 ratio: