BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

310What is CSS Grid and When to Use It
311Enabling Grid: display: grid
312Grid Lines, Tracks, Cells, and Areas
313Explicit vs Implicit Grid
314The Grid Axis: Rows and Columns
315Grid Container vs Grid Item Properties
316Basic Two-Column Grid with grid-template-columns
317Defining Rows with grid-template-rows
318The fr Unit: Fractional Space Distribution
319Mixing fr Units with Fixed Sizes
320Grid Gaps: gap, row-gap, column-gap
321Automatic Placement: How Grid Items Flow
322Grid Auto-Flow: row, column, and dense
323Inspecting Grids with Browser DevTools
324Grid vs Flexbox: Choosing the Right Tool
325Defining Grid Columns with grid-template-columns
326Defining Grid Rows with grid-template-rows
327The fr Unit: Flexible Grid Tracks
328Mixing fr Units with Fixed Sizes
329The repeat() Function for Grid Templates
330Auto-Sizing Tracks with auto
331Content-Based Sizing with min-content
332Content-Based Sizing with max-content
333Constraining Track Sizes with minmax()
334Common minmax() Patterns
335Auto-Fill: Creating Responsive Grids
336Auto-Fit: Collapsing Empty Tracks
337Auto-Fill vs Auto-Fit: When to Use Each
338Grid Gaps: gap, row-gap, and column-gap
339Implicit Grid Tracks and auto-rows/auto-columns
340Named Grid Lines for Semantic Templates
341The fit-content() Function
342Grid Template Sizing Best Practices
343Grid Lines and Line Numbers
344grid-column-start and grid-column-end
345grid-row-start and grid-row-end
346grid-column and grid-row Shorthand
347Spanning Tracks with span Keyword
348Negative Line Numbers
349Named Grid Lines
350Placing Items with Named Lines
351grid-area Shorthand Property
352Named Grid Areas
353Auto-Placement Algorithm
354grid-auto-flow Direction
355Dense Auto-Placement
356Overlapping Grid Items
357Implicit vs Explicit Placement
358Holy Grail Layout with Grid
359Card Grid with Auto-Fit
360Asymmetric Grid Layouts
361Grid-Based Image Galleries
362Responsive Dashboard Layouts
363Full-Height Sidebar Patterns
364Grid-Based Forms
365Overlapping Grid Items
366Grid with Named Lines
367Auto-Flowing Dense Layouts
368Responsive Grid Without Media Queries
369Grid-Based Navigation Menus
370Centered Layouts with Grid
371Grid Template Areas for Page Layout
372Subgrid Patterns
373Grid-Based Timelines
374Responsive Product Listings
375Grid-Based Split Screens
376Grid with Fallbacks
377When to Choose Grid Over Flexbox

Web Development

310What is CSS Grid and When to Use It
311Enabling Grid: display: grid
312Grid Lines, Tracks, Cells, and Areas
313Explicit vs Implicit Grid
314The Grid Axis: Rows and Columns
315Grid Container vs Grid Item Properties
316Basic Two-Column Grid with grid-template-columns
317Defining Rows with grid-template-rows
318The fr Unit: Fractional Space Distribution
319Mixing fr Units with Fixed Sizes
320Grid Gaps: gap, row-gap, column-gap
321Automatic Placement: How Grid Items Flow
322Grid Auto-Flow: row, column, and dense
323Inspecting Grids with Browser DevTools
324Grid vs Flexbox: Choosing the Right Tool
325Defining Grid Columns with grid-template-columns
326Defining Grid Rows with grid-template-rows
327The fr Unit: Flexible Grid Tracks
328Mixing fr Units with Fixed Sizes
329The repeat() Function for Grid Templates
330Auto-Sizing Tracks with auto
331Content-Based Sizing with min-content
332Content-Based Sizing with max-content
333Constraining Track Sizes with minmax()
334Common minmax() Patterns
335Auto-Fill: Creating Responsive Grids
336Auto-Fit: Collapsing Empty Tracks
337Auto-Fill vs Auto-Fit: When to Use Each
338Grid Gaps: gap, row-gap, and column-gap
339Implicit Grid Tracks and auto-rows/auto-columns
340Named Grid Lines for Semantic Templates
341The fit-content() Function
342Grid Template Sizing Best Practices
343Grid Lines and Line Numbers
344grid-column-start and grid-column-end
345grid-row-start and grid-row-end
346grid-column and grid-row Shorthand
347Spanning Tracks with span Keyword
348Negative Line Numbers
349Named Grid Lines
350Placing Items with Named Lines
351grid-area Shorthand Property
352Named Grid Areas
353Auto-Placement Algorithm
354grid-auto-flow Direction
355Dense Auto-Placement
356Overlapping Grid Items
357Implicit vs Explicit Placement
358Holy Grail Layout with Grid
359Card Grid with Auto-Fit
360Asymmetric Grid Layouts
361Grid-Based Image Galleries
362Responsive Dashboard Layouts
363Full-Height Sidebar Patterns
364Grid-Based Forms
365Overlapping Grid Items
366Grid with Named Lines
367Auto-Flowing Dense Layouts
368Responsive Grid Without Media Queries
369Grid-Based Navigation Menus
370Centered Layouts with Grid
371Grid Template Areas for Page Layout
372Subgrid Patterns
373Grid-Based Timelines
374Responsive Product Listings
375Grid-Based Split Screens
376Grid with Fallbacks
377When to Choose Grid Over Flexbox

← Web Development

Lesson 358 of 2,982·6. CSS GridPro lesson

Holy Grail Layout with Grid

Build the classic header-sidebar-content-footer layout using CSS Grid with minimal code.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course