Build a responsive card layout

Build the smallest layout first:

<ul class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <li>
    <article class="flex h-full flex-col rounded-lg border border-gray-200 p-6">
      <h2 class="text-lg font-semibold">CSS layout</h2>
      <p class="mt-2 leading-6 text-gray-600">Build resilient interfaces.</p>
      <a class="mt-auto pt-6 font-medium text-blue-700 focus-visible:outline-2"
         href="/css/">
        Read the course
      </a>
    </article>
  </li>
</ul>

The base layout is one column. More tracks appear when the viewport reaches each breakpoint.

The list semantics describe a collection. Grid belongs on the list because it controls the cards. Each card uses a vertical Flexbox: h-full fills the Grid item’s track, flex-col stacks content, and mt-auto pushes the action to the end without fixed card heights.

Equal card bottoms are a layout choice, not a reason to truncate useful descriptions. Test a card with a two-line title, long translated text, and no image. The track should grow without covering the action.

Make the real interactive element obvious. A visible link gives keyboard focus and a meaningful accessible name. If the entire card must be clickable, avoid nested links and buttons; restructure the markup rather than adding click handlers to the <article>.

Responsive variants are minimum-width conditions. Do not choose md and lg from habit. Resize with real content and add a column where the cards still meet their useful minimum width. A container query or auto-fit grid can be better when the card list lives in several page regions.

Use one spacing system: outer gap-6, inner p-6, and small content relationships such as mt-2. This creates rhythm without one-off margins on every child.

Your action is to render six cards with deliberately uneven content. Test keyboard focus, 200% zoom, and narrow containers. Remove every fixed height and explain which Grid and Flex rules produce the final alignment.