Introduction to Grid Properties
Explore CSS grid properties to create precise and flexible layouts. Understand how to use fr units, grid-template-columns and rows, gaps, and advanced functions like repeat and minmax. This lesson helps you design responsive grids that adapt smoothly to screen sizes and content changes.
We'll cover the following...
CSS grid approaches layout differently. As the name implies, it allows you to lay things out in a grid. While flexbox is loosey-goosey (zombly-wombly?) about where it places items and is rather flexible in its placement of those items (sometimes annoyingly so), the grid allows you both more precise control over where and how an element will be displayed and the flexibility necessary to make responsive design easy. It is, by far, the most powerful layout weapon available for dispatching zombies, but with its increase in power comes an equal increase in complexity.
Fractioning zombies: A special unit for grid
The fr unit represents a fraction of the remaining space in a grid. Your
layout may have leftover space for a variety of reasons. You might want a
few columns that are fixed in size, and one that flexes with screen size, or a
row that flexes with the content that is put into it. You can also do things
such as proportional widths. For example, having a column that’s three
times the size of another column: ...