Solution 1 :

you can use fractions like this

.container {
    border: 1px solid black;
    padding-bottom: 25%;
    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.

enter image description here

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;
    padding: 0;
    width: 100%;
}

.container {
    border: 1px solid black;
    padding-bottom: 25%;
    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;
}

enter image description here

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%;
  padding: 25%;
	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%;
  	/*padding-bottom: 25%;*/
	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;
  padding-bottom: 25%;
  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>

Comments

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

By

Leave a Reply

Your email address will not be published. Required fields are marked *