CSS grid part 6, align and justify content

Any elements within a grid can be positioned either horizontally or vertically within the container

Set the position of all grid items

To set the position of all items in a grid use the parameters justify-items and align-items. Justify controls the left to right or horizontal position. Align controls the top to bottom or vertical position. Below, justify-items: start is used along with align-items: center. Each div element is just big enough to contain the content and sits at the start of the content area, aligned in the center, vertically.

Set the position of one grid item

Below individual div elements are positioned with align-self and justify-self. the pseudo selector nth-child() is used so that no ID or class needs to be added to each div, to select it in CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *