Build a Grid layout

Create three equal columns like this:

<div class="grid grid-cols-3 gap-6">...</div>

Grid is a two-dimensional layout model. The parent defines rows and columns called tracks; direct children are placed into the resulting cells.

grid-cols-3 creates three minmax(0, 1fr) columns, so each receives an equal share of available width. Three columns are not automatically responsive. On a narrow screen, use a base layout and add tracks only when space exists:

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">...</div>

Items can span tracks when the content hierarchy calls for it:

<article class="sm:col-span-2">Featured story</article>

Do not use spans to recreate pixel coordinates. Let source order remain meaningful for keyboard and screen-reader navigation; visual placement should not turn the DOM into a puzzle.

For a component grid that should add columns based on available card width, an intrinsic track definition can remove viewport-specific guesses:

<div class="grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-6">
  ...
</div>

Here each card needs roughly 16rem; auto-fit creates as many columns as fit, and 1fr shares leftover space. Test the minimum against real translated and zoomed content.

Use Flexbox when one axis drives the layout. Use Grid when rows and columns must coordinate or when the container should define tracks. Both can be nested.

Your action is to build the same card list with responsive explicit tracks and with auto-fit/minmax. Resize the container, inspect the Grid overlay, and explain which behavior better matches the content requirement.