Web development and Tech news Blog site. WEBISFREE.com

HOME > css

[CSS] Exploring the place-content style property

Last Modified : 22 Aug, 2023 / Created : 22 Aug, 2023
400
View Count
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.
<div class="test">
  <div class="container">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
  </div>
</div>

Below are the default styles applied. A flex layout was used. For reference, the flex-wrap property was added to use align-content.
.container {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 50px;
  height: 50px;
  background: #999;
}

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


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

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

<div class="test">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>

<style>
.test .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.test .item {
width: 50px;
height: 50px;
background: #999;
}
</style>


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.
place-content: center center;

Upon executing the above code, it will appear as follows.
<div class="test2">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>

<style>
.test2 .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
place-content: center center;
}
.test2 .item {
width: 50px;
height: 50px;
background: #999;
}
</style>


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.
Perhaps you're looking for the following text as well?

Previous

How to apply line break hyphens to alphabet text in CSS, hyphens

Previous

Exploring the CSS will-change Style Property