Java-Scripts.net

Flexible Data Grid

Automatically reflow your content. This solution uses CSS Grid's auto-fit feature to create columns that resize and stack perfectly on any device.

Item 1
Item 2
Item 3
Item 4
Item 5

Resize your browser window to see the boxes rearrange automatically.

Copy the Script

<style>
.grid-container {
  display: grid;
  /* Auto-fit creates as many columns as fit */
  /* minmax(200px, 1fr) means columns act like fluid 
     boxes but never get smaller than 200px */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.item {
  background: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

<div class="grid-container">
  <div class="item">Content 1</div>
  <div class="item">Content 2</div>
  <div class="item">Content 3</div>
</div>

Frequently Asked Questions

No. While Bootstrap is great, this script shows how to achieve the same responsive grid behavior using only a few lines of vanilla CSS Grid code.

CSS Grid is supported by all modern browsers. For very old browsers (IE11), you might need a flexbox fallback, but grid is generally safe to use today.

Yes. The `minmax()` function in the CSS allows you to define the minimum width of a column before it wraps to the next line.