[CSS] Exploring the place-content style property

We're going to take a look at the place-content, one of the shortcut style properties in CSS that can be used in abbreviation.


# CSS place-content style property
The place-content property is a shorthand style property that allows the use of the following two properties simultaneously:

// align-content
// justify-content

These two properties are commonly used to align layouts vertically and horizontally with parent or neighboring elements in flexbox. The advantage of using place-content is that you can apply the styles of the above two properties at once without declaring them separately. The usage syntax is briefly as follows:

place-content: <align-content> <justify-content>;

Now, let's find out how it can be used with a simple example.


! Viewing css place-content example
Below is a look at several rectangular elements aligned inside the container class using flex.

Below are the default styles applied. A flex layout was used. For reference, the flex-wrap property was added to use align-content.

Now, let's apply the styles below and see how they appear.


Example 1) An example using align-content and justify-content:

With the above style applied, it will appear as follows.



This time, instead of align-content and justify-content, we have the look using place-content. The same values were used, so it's expected to appear the same as above.

Upon executing the above code, it will appear as follows.


Comparing the two examples above, it was confirmed that the results were as expected. In this way, using place-content allows you to use the two style properties at once in layouts using flex or grid.

That's a brief look at the place-content, a CSS shorthand style property.