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 371 of 2,982·6. CSS GridPro lesson

Grid Template Areas for Page Layout

Define entire page structures using ASCII-art-style template area definitions.

This lesson is for subscribers

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

See pricing Back to course