justify-content property is the horizontal position of the entire content area in the container (left, middle, right), and the
align-content property is the vertical position of the entire content area (top, middle, and bottom).
These two properties are written in exactly the same way, and both can take the following values. (The following diagrams all take
justify-content attributes as an example.
The diagrams of the attributes are exactly the same, except that the horizontal direction is changed to the vertical direction.)
start - the start border of the aligned container.
end - the end border of the aligned container.
center - Center the container inside.
stretch - When item size is not specified, stretches to take up the entire grid container.
space-around - Equal spacing on both sides of each item. Therefore, the spacing between items is twice as large as the spacing between items and the border of the container.
space-between - Items are spaced equally from item to item, and there is no space between item and container border.
space-evenly - Items are equally spaced from item to item, as is the space between item and container border.
place-content roperty is a combined shorthand for
align-content property and attribute.
place-content: <align-content> <justify-content>
Below is an example.
place-content: space-around space-evenly;
If the second value is omitted, the browser assumes that the second value is equal to the first value.//= htmlentities($post["body"]); ?>