CSS grid wrapping

Question

Is it possible to make a CSS grid wrap without using media queries?

In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using Flexbox, I'm unable to reliably space things nicely. I'd like to avoid a bunch of media queries too.

Here's some sample code:

_x000D_

.grid {_x000D_
  display: grid;_x000D_
  grid-gap: 10px;_x000D_
  grid-auto-flow: column;_x000D_
  grid-template-columns: 186px 186px 186px 186px;_x000D_
}_x000D_
_x000D_
.grid > * {_x000D_
  background-color: green;_x000D_
  height: 200px;_x000D_
}

_x000D_

<div class="grid">_x000D_
  <div>1</div>_x000D_
  <div>2</div>_x000D_
  <div>3</div>_x000D_
  <div>4</div>_x000D_
</div>

_x000D_

And here's a GIF image:

As a side-note, if anyone can tell me how I could avoid specifying the width of all the items like I am with grid-template-columns that would be great. I'd prefer the children to specify their own width.

User · Answer

You want either auto-fit or auto-fill inside the repeat   function   grid-template-columns  repeat auto-fit  186px     The difference between the two becomes apparent if you also use a minmax   to allow for flexible column sizes   grid-template-columns  repeat auto-fill  minmax 186px  1fr      This allows your columns to flex in size  ranging from 186 pixels to equal-width columns stretching across the full width of the container  auto-fill will create as many columns as will fit in the width  If  say  five columns fit  even though you have only four grid items  there will be a fifth empty column     Using auto-fit instead will prevent empty columns  stretching yours further if necessary

User · Answer

I had a similar situation  On top of what you did  I wanted to center my columns in the container while not allowing empty columns to for them left or right    grid        display  grid      grid-gap  10px      justify-content  center      grid-template-columns  repeat auto-fit  minmax 200px  auto

User · Answer

Use either auto-fill or auto-fit as the first argument of the repeat   notation   lt auto-repeat gt  variant of the repeat   notation  repeat    auto-fill   auto-fit        lt line-names gt    lt fixed-size gt      lt line-names gt       auto-fill  When auto-fill is given as the repetition number  if the grid container has a definite size or max size in the relevant axis  then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container  https   www w3 org TR css-grid-1  valdef-repeat-auto-fill   x000D   x000D   grid     display  grid    grid-gap  10px    grid-template-columns  repeat auto-fill  186px       grid gt       background-color  green    height  200px    x000D   lt div class  grid  gt     lt div gt 1 lt  div gt     lt div gt 2 lt  div gt     lt div gt 3 lt  div gt     lt div gt 4 lt  div gt   lt  div gt  x000D   x000D   x000D   The grid will repeat as many tracks as possible without overflowing its container   In this case  given the example above  see image   only 5 tracks can fit the grid-container without overflowing  There are only 4 items in our grid  so a fifth one is created as an empty track within the remaining space  The rest of the remaining space  track  6  ends the explicit grid  This means there was not enough space to place another track   auto-fit  The auto-fit keyword behaves the same as auto-fill  except that after grid item placement any empty repeated tracks are collapsed  https   www w3 org TR css-grid-1  valdef-repeat-auto-fit   x000D   x000D   grid     display  grid    grid-gap  10px    grid-template-columns  repeat auto-fit  186px       grid gt       background-color  green    height  200px    x000D   lt div class  grid  gt     lt div gt 1 lt  div gt     lt div gt 2 lt  div gt     lt div gt 3 lt  div gt     lt div gt 4 lt  div gt   lt  div gt  x000D   x000D   x000D   The grid will still repeat as many tracks as possible without overflowing its container  but the empty tracks will be collapsed to 0  A collapsed track is treated as having a fixed track sizing function of 0px   Unlike the auto-fill image example  the empty fifth track is collapsed  ending the explicit grid right after the 4th item   auto-fill vs auto-fit The difference between the two is noticeable when the minmax   function is used  Use minmax 186px  1fr  to range the items from 186px to a fraction of the leftover space in the grid container  When using auto-fill  the items will grow once there is no space to place empty tracks   x000D   x000D   grid     display  grid    grid-gap  10px    grid-template-columns  repeat auto-fill  minmax 186px  1fr        grid gt       background-color  green    height  200px    x000D   lt div class  grid  gt     lt div gt 1 lt  div gt     lt div gt 2 lt  div gt     lt div gt 3 lt  div gt     lt div gt 4 lt  div gt   lt  div gt  x000D   x000D   x000D   When using auto-fit  the items will grow to fill the remaining space because all the empty tracks will be collapsed to 0px   x000D   x000D   grid     display  grid    grid-gap  10px    grid-template-columns  repeat auto-fit  minmax 186px  1fr        grid gt       background-color  green    height  200px    x000D   lt div class  grid  gt     lt div gt 1 lt  div gt     lt div gt 2 lt  div gt     lt div gt 3 lt  div gt     lt div gt 4 lt  div gt   lt  div gt  x000D   x000D   x000D    Playground  CodePen Inspecting auto-fill tracks   Inspecting auto-fit tracks

User · Answer

Here s my attempt  Excuse the fluff  I was feeling extra creative   My method is a parent div with fixed dimensions  The rest is just fitting the content inside that div accordingly   This will rescale the images regardless of the aspect ratio  There will be no hard cropping either    x000D   x000D  body   x000D      background   131418  x000D      text-align  center  x000D      margin  0 auto  x000D    x000D   x000D   my-image-parent   x000D      display  inline-block  x000D      width  300px  x000D      height  300px  x000D      line-height  300px     Should match your div height    x000D      text-align  center  x000D      font-size  0  x000D    x000D   x000D     Start demonstration background fluff    x000D       bg1  background  url https   unsplash it 801 799    x000D       bg2  background  url https   unsplash it 799 800    x000D       bg3  background  url https   unsplash it 800 799    x000D       bg4  background  url https   unsplash it 801 801    x000D       bg5  background  url https   unsplash it 802 800    x000D       bg6  background  url https   unsplash it 800 802    x000D       bg7  background  url https   unsplash it 802 802    x000D       bg8  background  url https   unsplash it 803 800    x000D       bg9  background  url https   unsplash it 800 803    x000D       bg10  background  url https   unsplash it 803 803    x000D       bg11  background  url https   unsplash it 803 799    x000D       bg12  background  url https   unsplash it 799 803    x000D       bg13  background  url https   unsplash it 806 799    x000D       bg14  background  url https   unsplash it 805 799    x000D       bg15  background  url https   unsplash it 798 804    x000D       bg16  background  url https   unsplash it 804 799    x000D       bg17  background  url https   unsplash it 804 804    x000D       bg18  background  url https   unsplash it 799 804    x000D       bg19  background  url https   unsplash it 798 803    x000D       bg20  background  url https   unsplash it 803 797    x000D     end demonstration background fluff    x000D   x000D   my-image   x000D      width  auto  x000D      height  100   x000D      vertical-align  middle  x000D      background-size  contain  x000D      background-position  center  x000D      background-repeat  no-repeat  x000D    x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg1  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg2  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg3  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg4  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg5  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg6  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg7  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg8  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg9  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg10  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg11  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg12  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg13  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg14  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg15  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg16  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg17  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg18  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg19  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  my-image-parent  gt  x000D       lt div class  my-image bg20  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You may be looking for auto-fill   grid-template-columns  repeat auto-fill  186px     Demo  http   codepen io alanbuchanan pen wJRMox  To use up the available space more efficiently  you could use minmax  and pass in auto as the second argument   grid-template-columns  repeat auto-fill  minmax 186px  auto      Demo  http   codepen io alanbuchanan pen jBXWLR  If you don t want the empty columns  you could use auto-fit instead of auto-fill

[html] CSS grid wrapping

The answer is

Examples related to html

Examples related to css

Examples related to css-grid

Tags