← All posts

Tailwind CSS Grid Layout from a Design: Sections and Columns

winden

Turning a design into a page often starts with guessing: which boxes are sections, which are wrappers, and how many columns each row needs. In this video we mark up a real landing page design and turn it into a Tailwind CSS grid layout made of sections, containers and column classes. We build the whole page skeleton once, and every repeated row reuses the same few classes.

Break the design into sections, containers and columns

If you start writing markup before you understand the layout, you end up rewriting it. Before touching code, we copied the design (an eLearning landing page in Sketch) and drew coloured outlines over it, with a legend:

  • Section: yellow, a full-width band of the page
  • Container: green, the centered wrapper inside each section
  • 1-2 Column: red, the standard column splits
  • Not standard Column: blue, rows that don't follow a simple split

Once the outlines are on, the pattern is easy to see. Sections repeat, containers repeat, and most rows are halves. The "Why choose e-learn" row is also a half, with a nested 2×2 group of cards on the right. The "Available Courses" row splits into quarters that wrap to a second row, and the pricing row is thirds. After that, the rest of the page goes back to half and half.

So instead of a dozen unique layouts, you have a handful of splits that you can reuse.

Outline the HTML structure in Tailwind Play

Writing the bare structure first means you can see the whole page before you style anything. We did this in Tailwind Play (play.tailwindcss.com), with the design open next to it.

Each row of the design becomes the same three levels: a section, a container, and one div per column:

<section class="section">
  <div class="container">
    <div></div>
    <div></div>
  </div>
</section>

From there you duplicate the block for each row and change the number of inner divs: two for halves, three for thirds, four for quarters. Where the design has two containers inside one section, you put two containers inside that section.

To see the empty structure in the preview, we added a small debugging snippet in the CSS tab. It gives sections, containers and empty divs coloured dashed borders, the same colours as the legend in the design:

.section:empty {
  @apply border-2 border-dashed border-red-500 bg-red-100 p-4;
}
.section {
  @apply border-2 border-dashed border-red-500 bg-red-100 p-4;
}
.container:empty {
  @apply border-2 border-dashed border-green-500 bg-green-100 p-4;
}
.container {
  @apply border-2 border-dashed border-green-500 bg-green-100;
}
div:empty {
  @apply border-2 border-dashed border-blue-500 bg-blue-100 p-4;
}

Now the preview shows the page skeleton as coloured boxes, and you can check it against the design at a glance.

Name the column splits

If a class name tells you how a row divides, you can read the layout straight from the HTML. We added one column class per split to each container:

<div class="container col--1-2">
<div class="container col--1-3">
<div class="container col--1-4">

In the end every row of the page uses one of col--1-2, col--1-3 or col--1-4. The container defines the width and centering, and the column class says how the row splits.

Style the section and container

The section and container rules decide spacing and width for every row, so you only write them once. In the CSS tab:

  1. Make .section full width with vertical padding: @apply w-full py-16;
  2. Center .container with mx-auto (automatic left and right margin).
  3. Set the container width: 90%. On mobile the content never runs edge to edge, and the gutter looks the same on every device.
.section {
  @apply w-full py-16;
}

.container {
  width: 90%;
  @apply mx-auto;
}

While building, we also added @apply border-red-500 bg-red-100 border-2 border-solid; to .section so the sections stayed visible. You'll see that in the video, and you remove it when you're done.

Build mobile-first grid classes

Without a system, each row gets its own breakpoint rules. Tailwind CSS is mobile first, so we start with one column per row and add the split from the medium breakpoint up:

.col--1-2 {
  @apply grid gap-4 md:grid-cols-2;
}

.col--1-3 {
  @apply grid gap-4 md:grid-cols-3;
}

As soon as .col--1-2 exists, every half-and-half row on the page is fixed. Add .col--1-3 and the thirds row falls into place too. In the mobile preview, all columns stack one under another, which is what you want on small screens.

Handle the four-column row

The "Available Courses" quarters are the exception. Four cards stacked one per row on mobile would be very long. So for col--1-4 we want two per row by default and the full four-column split at larger sizes, which follows the design's 4 + 4 card rows. The idea is the same as the other splits: set the small-screen column count first, then add the breakpoint.

Who is this for

  • Site builders turning a design into a page: you get a repeatable way to read a design and write the layout without guessing.
  • Tailwind CSS users who repeat grid utilities on every row: a few @apply classes like col--1-2 replace the same utilities copied across the page.
  • Winden users: the same section, container and column classes work as reusable classes in your WordPress builds.

FAQ

How do I turn a design into a Tailwind grid layout? Mark the design first: outline sections, containers and columns in different colours. Then write the HTML as section → container → column divs, and give each container a column class for its split (halves, thirds, quarters).

Why use a separate container inside each section? The section spans the full width and holds the vertical padding. The container limits the width (90% in the video) and centers the content with mx-auto, so the edge spacing is the same on every device.

How do I make columns stack on mobile and split on desktop? Tailwind is mobile first. Use grid gap-4 so columns stack by default, then add md:grid-cols-2 or md:grid-cols-3 so they split from the medium breakpoint up.

What about rows that don't fit halves or thirds? We mark them as non-standard in the design and handle them on their own. A nested 2×2 group sits inside a half column, and a four-column row can show two per row on small screens instead of stacking all four.

Get Winden → dplugins.com

Related posts