Question 219784 in CSS Question posted in
Some basic documentation can be found here.

Css – Aligning center on flexWrap

I have an div#ct and it contains 5 child div.content. I want to have three on the first row and two on the second row with flex-wrap and centering them. The problem is that the width of each child div is longer than its actual content width by using flex-basis. Please run the code below for better understanding.

#ct {
   display: flex;
   flex-wrap: wrap;
   gap: 9px 30px;
   justify-content: center;
}

.content {
   flex-basis: 28%;
}

.content {
   background-color: green;
}
<div id="ct">
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
</div>

I have also tried with grid and it solve the width problem but I just cannot center them.

#ct {
   display: grid;
   grid-template-columns: repeat(3, auto);
   gap: 9px 30px;
   justify-content: center;
}

.content {
   flex-basis: 28%;
}

.content {
   background-color: green;
}
<div id="ct">
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
</div>

Expected result >>> enter image description here

To conclude, the flex solution forces the content to be grow and the grid solutoin cannot center the items. Anyone can solve this?

Tags:

2

Answers


  1. 0 
    #ct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.content {
  flex: 1 0 calc(33.33% - 20px); /* Adjusted to 33.33% (1/3) minus gap */
  max-width: calc(33.33% - 20px); /* Adjusted to 33.33% (1/3) minus gap */
  margin: 5px; /* Gap between items */
  background-color: green;
  text-align: center;
}

/* Additional styling to make the content look nicer */
.content p {
  margin: 0;
  padding: 10px;
  font-size: 16px;
}
    <div id="ct">
  <div class="content"><p>Content</p></div>
  <div class="content"><p>Content</p></div>
  <div class="content"><p>Content</p></div>
  <div class="content"><p>Content</p></div>
  <div class="content"><p>Content</p></div>
</div>
    Login or Signup to reply.
  2. 0

    Is this solution to your problem:

    #ct {
   display: flex;
   flex-wrap: wrap;
   gap: 9px 0;
   justify-content: center;
   width: 400px;
}

.content {
   flex-basis: 28%;
   display: flex;
   justify-content: center;
}

p {
   background-color: green;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 70px;
   height: 70px;
   margin: 0;
   font-size: 20px;
}
    <div id="ct">
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search