Build well-composed page layouts using CSS Grid for macro structure and Flexbox for component layout — understanding the rule of thirds, golden ratio, grid systems, and how to create balanced, scannable page compositions.
Layout is the art of arranging elements in space. Good layout feels effortless and natural — users scan the page intuitively and find what they need. Bad layout feels cluttered and overwhelming — every element competes for attention and nothing has a clear home.
CSS Grid and Flexbox are the technical tools for implementing layout, but the underlying decisions — how wide should this column be? How much space between sections? Where should the CTA live? — are design decisions rooted in principles of composition.
This lesson covers the composition principles that make layouts feel balanced and the CSS techniques that implement them precisely.
A 12-column grid system is the standard framework for web layout. 12 columns work because 12 is divisible by 1, 2, 3, 4, 6, and 12 — enabling half, third, quarter, and sixth column widths without fractional values.
Building a 12-column grid:
1/* Container: constrains content to a maximum width */
2.container {
3 width: 100%;
4 max-width: 80rem; /* 1280px — comfortable reading width at desktop */
5 margin-inline: auto;
6 padding-inline: var(--space-6); /* 24px gutter on each side */
7}
8
9/* 12-column grid */
10.grid-12 {
11 display: grid;
12 grid-template-columns: repeat(12, 1fr);
13 gap: var(--space-6); /* 24px gutter between columns */
14}
15
16/* Column span utilities */
17.col-1 { grid-column: span 1; }
18.col-2 { grid-column: span 2; }
19.col-3 { grid-column: span 3; } /* 3/12 = 25% width */
20.col-4 { grid-column: span 4; } /* 4/12 = 33.3% width */
21.col-6 { grid-column: span 6; } /* 6/12 = 50% width */
22.col-8 { grid-column: span 8; } /* 8/12 = 66.7% width */
23.col-9 { grid-column: span 9; } /* 9/12 = 75% width */
24.col-12 { grid-column: span 12; } /* full width */
25
26/* Common layouts using 12-column grid */
27
28/* 2/3 + 1/3 split (content + sidebar) */
29.content-area { grid-column: span 8; }
30.sidebar { grid-column: span 4; }
31
32/* 1/3 + 2/3 (image + text) */
33.image-col { grid-column: span 4; }
34.text-col { grid-column: span 8; }
35
36/* 3-column equal */
37.feature { grid-column: span 4; } /* 3 × 4 = 12 */
38
39/* 4-column equal */
40.stat { grid-column: span 3; } /* 4 × 3 = 12 */Responsive grid behavior:
1/* Stacks on mobile, multi-column on desktop */
2.grid-12 {
3 display: grid;
4 grid-template-columns: 1fr; /* mobile: single column */
5 gap: var(--space-4);
6}
7
8@media (min-width: 48rem) { /* tablet: 768px+ */
9 .grid-12 {
10 grid-template-columns: repeat(6, 1fr);
11 gap: var(--space-6);
12 }
13 .col-md-3 { grid-column: span 3; } /* half width on tablet */
14}
15
16@media (min-width: 64rem) { /* desktop: 1024px+ */
17 .grid-12 {
18 grid-template-columns: repeat(12, 1fr);
19 }
20 .col-lg-4 { grid-column: span 4; } /* third width on desktop */
21}CSS Grid named areas create readable, maintainable page templates where the layout structure is visible in the CSS itself.
Page template with named areas:
1/* Define the page template */
2.page-template {
3 display: grid;
4 min-height: 100vh;
5 grid-template-areas:
6 'header'
7 'hero'
8 'main'
9 'footer';
10 grid-template-rows: auto auto 1fr auto;
11 /* header and footer: shrink to content */
12 /* hero: shrink to content */
13 /* main: fills remaining space */
14}
15
16/* Assign elements to areas */
17.site-header { grid-area: header; }
18.hero-section { grid-area: hero; }
19.main-content { grid-area: main; }
20.site-footer { grid-area: footer; }
21
22/* Add sidebar layout at desktop */
23@media (min-width: 64rem) {
24 .page-template {
25 grid-template-areas:
26 'header header'
27 'hero hero'
28 'main sidebar'
29 'footer footer';
30 grid-template-columns: 1fr 20rem; /* content: flexible; sidebar: fixed */
31 }
32 .sidebar { grid-area: sidebar; }
33}Course detail page layout:
1.course-page {
2 display: grid;
3 max-width: 80rem;
4 margin-inline: auto;
5 padding-inline: var(--space-6);
6
7 /* Mobile: all stacked */
8 grid-template-areas:
9 'media'
10 'info'
11 'curriculum'
12 'reviews'
13 'instructor';
14}
15
16@media (min-width: 64rem) {
17 .course-page {
18 grid-template-areas:
19 'media info'
20 'curriculum info'
21 'reviews info'
22 'instructor info';
23 grid-template-columns: 1fr 21rem; /* content | sticky sidebar */
24 gap: var(--space-10) var(--space-12); /* row gap | column gap */
25 align-items: start;
26 }
27}
28
29.course-media { grid-area: media; }
30.course-info { grid-area: info; }
31.course-curriculum { grid-area: curriculum; }
32.course-reviews { grid-area: reviews; }
33.course-instructor { grid-area: instructor; }
34
35/* Sticky enrollment sidebar */
36.course-info {
37 position: sticky;
38 top: calc(var(--header-height, 4rem) + var(--space-4));
39 /* aligns sticky top with header */
40}Classical composition principles — the rule of thirds and the golden ratio — help create layouts that feel naturally balanced without conscious analysis.
Rule of thirds:
Divide the page into a 3×3 grid. Place important content at the four intersection points (focal points) rather than at the center.
CSS implementation of rule of thirds:
1/* Hero section using rule of thirds horizontal split */
2.hero {
3 display: grid;
4 /* 2/3 content left | 1/3 image right = rule of thirds split */
5 grid-template-columns: 2fr 1fr;
6 align-items: center;
7 gap: var(--space-12);
8 min-height: 85vh;
9 padding: 0 var(--space-10);
10}
11
12/* Content in left 2/3 — primary focal point */
13.hero-content { /* occupies 2/3 of page width */ }
14
15/* Visual in right 1/3 — secondary focal point */
16.hero-visual { /* occupies 1/3 of page width */ }Golden ratio (1:1.618):
The golden ratio creates proportions that feel harmonious. Common applications:
CSS golden ratio proportions:
1/* Golden ratio content/sidebar split */
2.golden-layout {
3 display: grid;
4 /* 61.8% content | 38.2% sidebar — golden ratio */
5 grid-template-columns: 61.8% 38.2%;
6 gap: var(--space-12);
7}
8
9/* Alternative using fractions */
10.golden-layout {
11 grid-template-columns: 1.618fr 1fr; /* ratio preserved */
12}
13
14/* Golden ratio in spacing */
15:root {
16 --space-golden-sm: 1rem; /* 16px */
17 --space-golden-md: calc(1rem * 1.618); /* 25.9px ≈ 26px */
18 --space-golden-lg: calc(1rem * 2.618); /* 41.9px ≈ 42px */
19}When to use rule of thirds vs centered layout:
Visual rhythm is the regular variation of elements in a layout that creates a sense of flow. Good rhythm makes pages feel organized and easy to scan.
Creating vertical rhythm with a baseline grid:
1/* Base line height: 1.5rem (24px) — the basic rhythm unit */
2:root {
3 --baseline: 1.5rem; /* 24px — one line height unit */
4}
5
6/* All vertical spacing in multiples of baseline */
7.section { padding-block: calc(var(--baseline) * 4); } /* 96px */
8.subsection { margin-bottom: calc(var(--baseline) * 2); } /* 48px */
9.paragraph { margin-bottom: var(--baseline); } /* 24px — one line gap */Section spacing scale:
1/* Sections progressively increase in importance toward the center of the page */
2
3.section-minor {
4 padding-block: var(--space-8); /* 32px — tight, less important */
5}
6
7.section-major {
8 padding-block: var(--space-16); /* 64px — typical section */
9}
10
11.section-hero {
12 padding-block: var(--space-20); /* 80px+ — hero, maximum breathing room */
13}
14
15/* OR using fluid spacing */
16.section {
17 padding-block: clamp(3rem, 8vw, 6rem); /* 48px mobile → 96px desktop */
18}Horizontal rhythm with max-width containers:
1/* Different widths for different content types */
2.container-wide { max-width: 90rem; } /* 1440px — full-width layouts */
3.container { max-width: 80rem; } /* 1280px — standard pages */
4.container-narrow { max-width: 48rem; } /* 768px — article/blog content */
5.container-prose { max-width: 40rem; } /* 640px — prose reading */
6
7/* All containers auto-center */
8[class^='container'] {
9 margin-inline: auto;
10 padding-inline: var(--space-6);
11}Building the DevBootstrap course listing page layout using named grid areas, 12-column grid, and visual rhythm.
1/* Course listing page: complete layout system */
2
3/* 1. Global container */
4.page-wrapper {
5 display: grid;
6 min-height: 100vh;
7 grid-template-rows: auto 1fr auto; /* header, main, footer */
8 grid-template-areas:
9 'site-header'
10 'site-main'
11 'site-footer';
12}
13
14.site-header { grid-area: site-header; }
15.site-main { grid-area: site-main; }
16.site-footer { grid-area: site-footer; }
17
18/* 2. Content container with consistent horizontal margins */
19.container {
20 width: 100%;
21 max-width: 80rem; /* 1280px */
22 margin-inline: auto;
23 padding-inline: clamp(1rem, 4vw, 2.5rem); /* 16px mobile → 40px desktop */
24}
25
26/* 3. Hero section: rule of thirds horizontal split */
27.hero-section {
28 padding-block: clamp(4rem, 8vw, 7rem); /* 64px → 112px fluid */
29 background-color: var(--color-bg-surface);
30}
31
32.hero-grid {
33 display: grid;
34 grid-template-columns: 1fr; /* mobile: full width */
35 gap: var(--space-12);
36 align-items: center;
37}
38
39@media (min-width: 48rem) {
40 .hero-grid {
41 grid-template-columns: 1.618fr 1fr; /* golden ratio: content | visual */
42 }
43}
44
45/* 4. Filters bar */
46.filters-section {
47 padding-block: var(--space-6);
48 border-bottom: 1px solid var(--color-border);
49 position: sticky;
50 top: 4rem; /* below the header */
51 background-color: var(--color-bg-page);
52 z-index: 10;
53}
54
55.filters-inner {
56 display: flex;
57 align-items: center;
58 gap: var(--space-3);
59 overflow-x: auto;
60 scrollbar-width: none;
61 flex-wrap: nowrap;
62}
63
64/* 5. Course grid: 12-column with auto-fill cards */
65.courses-section {
66 padding-block: var(--space-12);
67}
68
69.courses-grid {
70 display: grid;
71 /* Mobile: 1 column, Tablet: 2, Desktop: 3 */
72 grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
73 gap: var(--space-6);
74}
75
76/* 6. Pagination: centered, generous whitespace */
77.pagination-section {
78 padding-block: var(--space-12);
79 display: flex;
80 justify-content: center;
81}
82
83.pagination {
84 display: flex;
85 align-items: center;
86 gap: var(--space-1);
87}
88
89.page-btn {
90 display: flex;
91 align-items: center;
92 justify-content: center;
93 min-width: 2.25rem; /* 36px */
94 height: 2.25rem;
95 padding: 0 var(--space-2);
96 border-radius: var(--radius-md);
97 font-size: var(--text-sm);
98 font-weight: 500;
99 border: 1px solid var(--color-border);
100 background: white;
101 cursor: pointer;
102 transition: background-color var(--transition-base);
103}
104
105.page-btn:hover {
106 background-color: var(--color-bg-surface);
107}
108
109.page-btn[aria-current='page'] {
110 background-color: var(--color-action);
111 color: white;
112 border-color: var(--color-action);
113 font-weight: 600;
114}
115
116/* 7. Empty state: centered composition */
117.empty-state {
118 padding-block: var(--space-20);
119 display: flex;
120 flex-direction: column;
121 align-items: center;
122 text-align: center;
123 gap: var(--space-4);
124 max-width: 30rem;
125 margin-inline: auto;
126}
127
128.empty-state__icon {
129 width: 4rem;
130 height: 4rem;
131 color: var(--color-text-muted);
132}
133
134.empty-state__title {
135 font-size: var(--text-xl);
136 font-weight: 600;
137 color: var(--color-text);
138 margin: 0;
139}
140
141.empty-state__message {
142 font-size: var(--text-md);
143 color: var(--color-text-muted);
144 line-height: 1.6;
145 margin: 0;
146}The layout uses multiple grid layers: a page-level grid for header/main/footer, a container for horizontal constraints, a hero grid using the golden ratio (1.618:1), an auto-fill course grid that naturally columns based on available space, and a centered pagination component. The filters bar uses position: sticky with top: 4rem to stick below the site header without overlapping. The clamp() on container padding ensures consistent but fluid margins at all viewport sizes. The auto-fill course grid eliminates the need for media queries for the column count — the browser calculates the right number of columns from the minmax constraint.
The next lesson covers Gestalt Principles — the perceptual laws that explain how the human brain groups and organizes visual information, and how to apply them to UI design.
Your progress is saved in this browser, on this device only.