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