align items vs align content grid code example

Example 1: place item center in css using grid

.parent-element {
   display: grid;
   place-items: center;
}

Example 2: justify content vs align items gridd

The justify-content and align-content properties align the grid.

The justify-self, justify-items, align-self and align-items properties align the grid items.

Example 3: difference between align-content and align-items

First, align-items is for items in a single row. So for a single row of elements on main axis, align-items will align these items respective of each other and it will start with fresh perspective from the next row.

Now, align-content doesn't interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.

Check this fiddle : https://jsfiddle.net/htym5zkn/8/