Use CSS Grid like a pro
Learn CSS Grid with live examples and images.
Check it outYou can use the grid-area property for the following purposes:
grid-column-start
, grid-column-end
, grid-row-start
, and grid-row-end
properties.Let’s discuss the two purposes below.
grid-area
as a ShorthandHere is the syntax for using the grid-area
property as a shorthand for the grid-column-start
, grid-column-end
, grid-row-start
, and grid-row-end
properties:
Therefore, instead of writing:
You can alternatively use the grid-area
property to shorten your code like so:
grid-area
to Specify a Grid Item’s NameHere is the syntax for using the grid-area
property to specify a grid item’s name:
Here’s an example:
Using grid-area
to define a named grid item allows your grid container’s grid-template-areas
property to use the name to set the item’s size and location.