Nov 20, 2022

# Solution 1 :

you can use fractions like this

``````.container {
border: 1px solid black;
height: 100%;
width: auto;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
/* justify-content: center; */
justify-items: center;
align-items: center;

}

.container div {
width: 100px;
height: 100px;
}
``````

And the result will be like in the picture.

If you want a more grouped solution, you have to district container to fixe width and Positionate the container to center, or use flex.

OR formate DIV

``````
<div>
<div class="container">
<div style="background-color: rgb(87, 217, 93);">1</div>
<div style="background-color: rgb(227, 84, 18);">2</div>
<div style="background-color: rgb(230, 73, 115);">3</div>
<div style="background-color: rgb(0, 255, 255);">4</div>
<div style="background-color: rgb(221, 245, 7);">5</div>
<div style="background-color: rgb(227, 84, 18);">6</div>
</div>
</div>
``````

Here:

``````div{
margin: 0 auto;
width: 100%;
}

.container {
border: 1px solid black;
width: fit-content;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
/* justify-content: center; */
justify-items: center;
align-items: center;
}

.container div {
width: 100px;
height: 100px;
}

``````

# Solution 2 :

I think you want to use `justify-content` instead of `align-content` Here’s an example with `justify-content:space-between;`

EDIT: I figured out what you wanted, its bacuse you were giving your border space with padding only at the bottom and it wasn’t adjusting to it. Change `padding-bottom` to just `padding` You’re align-content: center is indeed working. Here look what I did.

``````.container {
border: 1px solid black;
height: 100%;
display: grid;
grid-gap: 5px;
grid-template-columns:repeat(3, 100px);
grid-template-rows: repeat(2,100px);
/*justify-content: center;*/
justify-content: center;
align-content: center;
}``````
``````<div class="container">
<div style="background-color: rgb(87, 217, 93);">1</div>
<div style="background-color: rgb(227, 84, 18);">2</div>
<div style="background-color: rgb(230, 73, 115);">3</div>
<div style="background-color: rgb(0, 255, 255);">4</div>
<div style="background-color: rgb(221, 245, 7);">5</div>
<div style="background-color: rgb(227, 84, 18);">6</div>
</div>``````

# Solution 3 :

Now i solved them. Giving padding size isnot working with align-content.
i deleted padding size and gave the div heigh and width.

``````.container {
border: 1px solid black;
height: 100%;
display: grid;
grid-gap: 5px;
grid-template-columns:repeat(3, 100px);
grid-template-rows: repeat(2,100px);
/*justify-content: center;*/
align-content: end;
height: 500px;
width: 500px;
}``````
``````<div class="container">
<div style="background-color: rgb(87, 217, 93);">1</div>
<div style="background-color: rgb(227, 84, 18);">2</div>
<div style="background-color: rgb(230, 73, 115);">3</div>
<div style="background-color: rgb(0, 255, 255);">4</div>
<div style="background-color: rgb(221, 245, 7);">5</div>
<div style="background-color: rgb(227, 84, 18);">6</div>

</div>``````

# Problem :

When i used these codes they dont work especially align-content doesnt work for chrome .

``````.container {
border: 1px solid black;
height: 100%;
display: grid;
grid-gap: 5px;
grid-template-columns:repeat(3, 100px);
grid-template-rows: repeat(2,100px);
/* justify-content: center; */
align-content:center;
}``````
``````<div class="container">
<div style="background-color: rgb(87, 217, 93);">1</div>
<div style="background-color: rgb(227, 84, 18);">2</div>
<div style="background-color: rgb(230, 73, 115);">3</div>
<div style="background-color: rgb(0, 255, 255);">4</div>
<div style="background-color: rgb(221, 245, 7);">5</div>
<div style="background-color: rgb(227, 84, 18);">6</div>
</div>``````

### Comment posted by Jeff Berlin

What exactly are you trying to do with the

### Comment posted by John

Hi can you explain your problem more? This code seems to be working fine.

### Comment posted by halilibrahimtosun

align-content:center ,space-between or end dont work. i don’t know why. i am writing exactly the same however nothing changes.

### Comment posted by Jeff Berlin

Are you using Bootstrap? And you are wanting the

### Comment posted by John

maybe you mean to use