Skip to content
Tailwind CSS

Grid vs. Columns

Both layouts can create multiple columns, but they arrange content in different ways. Compare the same cards below, then choose based on whether items need shared rows or should flow naturally.

Same cards, different flow

Grid places items across rows and columns. Multi-column layout flows down one column and continues in the next; the browser balances the columns, while each card is kept together where possible.

CSS Grid

Items fill each row from left to right. Tracks line up, so the tallest card in a row sets that row's height.

  1. 01Profile

    A short introduction with a name and a few details.

  2. 02Release notes

    A longer update with room for a few sentences about what changed, why it changed, and what to try next.

  3. 03Reading list

    Articles and notes collected for later. Some entries have extra context, so their cards naturally take up more space.

  4. 04Quick links

    A compact group of useful destinations.

  5. 05Weekly log

    A small journal of progress. The summary can grow as the week gets busier, and the card height follows its content.

  6. 06Useful tools

    A couple of tools and a note about when each one is helpful.

Source order runs across each row before moving down.
<ol class="m-0 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2">
  <li>...</li>
</ol>

CSS columns

Items flow vertically through the columns. Each column can have its own content height instead of aligning to shared rows.

  1. 01Profile

    A short introduction with a name and a few details.

  2. 02Release notes

    A longer update with room for a few sentences about what changed, why it changed, and what to try next.

  3. 03Reading list

    Articles and notes collected for later. Some entries have extra context, so their cards naturally take up more space.

  4. 04Quick links

    A compact group of useful destinations.

  5. 05Weekly log

    A small journal of progress. The summary can grow as the week gets busier, and the card height follows its content.

  6. 06Useful tools

    A couple of tools and a note about when each one is helpful.

Source order continues down a column, then moves to the next.
<ol class="m-0 columns-1 list-none gap-3 p-0 sm:columns-2">
  <li class="mb-3 break-inside-avoid-column">...</li>
</ol>

Which one should you use?

Choose Grid for relationships
Use it when rows and columns matter: dashboards, product grids, forms, or cards that should align across each row.
Choose columns for flowing content
Use it for independent items that can fill vertical space naturally, such as a card collection, image gallery, or magazine layout. It does not create shared row alignment.

Read the Tailwind CSS v4 docs for grid columns, multi-column layout, and controlling column breaks.