0

auto-fit is trying to fit as many cells into the grid container as possible and the minimum width a cell can be is 180px. When there’s overflow, a new row is made. This new row seems to have the exact same columns as the row above.

I am wanting the items in the new row to be horizontally centered in the container. Is this possible?

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
<div class="grid-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
rfrostr
  • 91
  • 7
  • What does justify-items:center; do? You may want to replace auto-fit with percentage. – JWP May 18 '20 at 01:12
  • Nothing in this situation because the secondary row is full of (empty) cells. Is the limitation of CSS Grids that the columns of the first row dictate the number of columns in all the other rows? Using % won't cause items to 'wrap' onto a new column. – rfrostr May 18 '20 at 11:10
  • 1
    what you want is not a grid, you need Flexbox for this task – Temani Afif May 18 '20 at 11:23
  • Thanks again Temani, off to Flexbox I go! – rfrostr May 18 '20 at 11:42

0 Answers0