W3.CSSLesson 15Free preview

W3.CSS Grid Helpers

This lesson is part of W3.CSS · All levels

Summary

Grid helper makes it easy to place items in a specific position without manually counting rows and columns. You can use area names with grid-template-area, stretch a few columns with span, or create columns that automatically adjust. With this helper, the complex layout remains legible and easy to maintain.

Key points

Grid-template-areas naming the layout area
Grid-column: span 2 makes the item span two columns
Auto-fit and minmax create automatic responsive columns
Justify-items and align-items sort the contents of each cell
Align-self overlap the alignment for a particular item

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.