Create Galleries easily with CSS Grid

grid-gallery lets you create a Gallery with CSS grid. It uses auto-fill by default.

<div class="grid-gallery">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Choose from auto-fill or auto-fit

grid-gallery uses auto-fill by default.

You can change between auto-fit and auto-fill by using the grid-gallery-fit or grid-gallery-fill class.

<div class="grid-gallery-fit">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

<div class="grid-gallery-fill">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Change the width of each column

You can size each column with --item-width.

<div class="grid-gallery [--item-width:5rem]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Never worry about grid items exceeding their container

All grid items have a max-width of 100%, so you can set --item-width to your heart’s content without worrying about it being too large.

<div class="grid-gallery [--item-width:1000px]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>