CSS space between | alignment in flex and grid containers

CSS space-between is very important value to equally distribute the white space between the flex or grid items. The first and last items are aligned at the start and end of the flex or grid container and the white space is distributed equally among the remaining items. We'll learn how to equally distribute the space between the items in flex or grid containers.

It is one of the values of align-content, justify-content, and place-content properties. These properties are applicable to grid and flex containers.

align-content: space-between;

CSS align-content: space-between value places the first and last items vertically at the start and end of the flex/grid container and the white space is distributed equally among the remaining items. See the example given below.

Example 1:

In the following example, the first and last examples are placed vertically at the start and end of the container and white space is distributed equally between these items.

<style>
.container{
width:100%; 
height:300px;
background-color:rgb(240,240,240);
display:flex; 
flex-wrap:wrap; 
align-content: space-between;
}
.items{
height:50px; 
width:100%;
background-color:lightgreen;
}
</style>


<div class="container">
<div class="items">First</div>
<div class="items">Item1</div>
<div class="items">Item2</div>
<div class="items">Last</div>
</div>

justify-content: space-between;

CSS justify-content: space-between; property places the first and last items horizontally at the start and end of the flex/grid container and distributes the space equally among the remaining items. See the following examples.

Example 2:

In the following example, the first and last examples are placed horizontally at the start and end of the container and white space is distributed equally between these items.

<style>
.container{
width:100%; 
height:300px;
background-color:rgb(240,240,240);
display:flex; 
flex-wrap:wrap; 
justify-content: space-between;
}
.items{
height:100%; 
width:50px;
background-color:lightgreen;
}
</style>


<div class="container">
<div class="items">First</div>
<div class="items">Item1</div>
<div class="items">Item2</div>
<div class="items">Last</div>
</div>

place-content: space-between;

CSS place-content: space-between; aligns the first and last items at the start and end of the flex/grid container both vertically and horizontally and distributes the white space equally among the remaining items. place-content is a shorthand property of align-content and justify-content. See the following examples.

place-content: align-content justify-content;

Example 3:

The items are aligned at the start and end of the container both vertically and horizontally and the remaining items are distributed equally. Please change the screen size to understand more. It is a flexible container for every device size.

<style>
.container{
width:100%; 
height:300px;
background-color:rgb(240,240,240);
display:flex; 
flex-wrap:wrap; 
place-content: space-between;
}
.items{
height:50px; 
width:150px; 
background-color:lightgreen;
}
</style>


<div class="container">
 <div clss="items">First</div>
 <div clss="items">Item1</div>
 <div clss="items">Item2</div>
 <div clss="items">Item3</div>
 <div clss="items">Item4</div>
 <div clss="items">Item5</div>
 <div clss="items">Item6</div>
 <div clss="items">Item7</div>
 <div clss="items">Item8</div>
 <div clss="items">Last</div>
</div>