Align Items
CSS grid-area
The CSS grid-area
property allows for elements to overlap each other by using the z-index
property on a particular element which tells the browser to render that element on top of the other elements.
Align Items
The align-items
property is used on a grid container. It’s used to determine how the grid items are spread out along the column by setting the default align-self
property for all child grid items.
The value start
aligns grid items to the top side of the grid area.
The value end
aligns grid items to the bottom side of the grid area.
The value center
aligns grid items to the center of the grid area.
The value stretch
stretches all items to fill the grid area.
#container {
display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
Join the conversation