Introduction

A while ago, a client came to me with a request: show their data in a responsive grid.

The catch? The number of columns was dynamic, changing depending on the dataset. On top of that, some columns contained very long text that broke every layout I tried. And here’s the kicker — we didn’t even know the exact columns in advance, only their types (text, number, email, date, datetime).

I tested a few existing grid and table libraries, but they were either too heavy, too rigid, or required declaring all columns explicitly. None of them handled this mix of dynamic columns plus long text gracefully.

So I decided to build my own solution. That’s how AutoFitGrid was born.

The Problem

Dynamic data is unpredictable. You can’t hard-code layouts, and you can’t assume short text everywhere — sometimes you get multi-sentence descriptions.

If you throw that into a plain HTML table:

  • Columns overflow, forcing horizontal scroll.
  • Small values like numbers end up wasting space.

That was exactly what my client’s use case looked like.

The Solution: AutoFitGrid

AutoFitGrid builds a grid by looking at two things:

  1. The declared type of each column (text, number, email, date, datetime).
  2. The actual values inside the cells (short vs. long content).

From that, it automatically calculates widths, applies alignment, and lets content wrap so the grid stays responsive. You don’t need to set widths or know the number of columns ahead of time — the library handles it.

How I Handle Long Text (the tricky part)

The hardest part of this problem was figuring out how to fit long text into a grid when the number of columns is dynamic and unknown.

I solved it by treating each column as a rectangle. The challenge is finding the right width-to-height ratio so text flows neatly without breaking the layout.

Here’s the logic:

  1. Count the words in the text.
  2. Classify the text as short, medium, or long.
  3. Pick a target ratio depending on the category (short text = narrower rectangle, long text = wider rectangle).
  4. Calculate an appropriate width and height so the text wraps cleanly inside.

This way, short values like names don’t waste space, while long descriptions remain readable and contained.

Initializing with HTML/JavaScript

Here’s how you declare a grid in HTML. Notice there are no widths — only types.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">Task Description</div>
  <div class="grid-header" data-type="text">Assigned To</div>
  <div class="grid-header" data-type="email">Email</div>
  <div class="grid-header" data-type="datetime">Start Date</div>
  <div class="grid-header" data-type="datetime">Due Date</div>
  <div class="grid-header" data-type="number">Priority</div>
  <div class="grid-header" data-type="number">Estimated Hours</div>

  <div class="grid-item">
    Implement a very long description to test how the grid layout adjusts
    and wraps text dynamically across multiple lines.
  </div>
  <div class="grid-item">Jane Doe</div>
  <div class="grid-item">jane.doe@example.com</div>
  <div class="grid-item">2024-01-15 08:30:00</div>
  <div class="grid-item">2024-07-15 17:00:00</div>
  <div class="grid-item">1</div>
  <div class="grid-item">100</div>
</div>

JavaScript

Once your markup is ready, you give the grid some intelligence with one initialization call.

new AutoFitGrid({
  container: document.querySelector('.grid-container'),
  defaultMinWidth: 50,
  defaultMaxWidth: Infinity,
  adjustmentThreshold: 200,
  headerSelector: '.grid-header',
  columnSelector: '.grid-item',
  showDebug: false
});

If you turn on showDebug: true, you’ll see logs showing how AutoFitGrid measures and fits columns.

Using it in React

import React, { useEffect, useRef } from 'react';
import AutoFitGrid from 'auto-fit-grid';

function MyGrid() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      new AutoFitGrid({
        container: ref.current,
        headerSelector: '.grid-header',
        columnSelector: '.grid-item'
      });
    }
  }, []);

  return (
    <div className="grid-container" ref={ref}>
      <div className="grid-header" data-type="text">Name</div>
      <div className="grid-header" data-type="email">Email</div>
      <div className="grid-header" data-type="number">Score</div>

      <div className="grid-item">Alice Wonderland</div>
      <div className="grid-item">alice@example.com</div>
      <div className="grid-item">88</div>

      <div className="grid-item">Bob Bobson</div>
      <div className="grid-item">bob@example.com</div>
      <div className="grid-item">95</div>
    </div>
  );
}

Installing and Trying It Out

You can install AutoFitGrid from npm:

npm install auto-fit-grid

Or explore the live examples and docs: