Grid

Grid

Tailwind ships with a complete set of grid and layout positional classes. We have the Honeycomb grid utilities to better support 95% of your app layouts, when you don’t need complete control and just want an out-of-the-box positioning system.

Basic grid

To create any grid layout, first create a container with class .hc-grid. Every direct child element of a Grid will be positioned automatically, based on the container’s size.

The basic default grid is good for arranging small to medium sized content/components. To make it, the grid container’s direct child must have the class .hc-grid--default.

This is box one
This is box two
This is box three
This is box four
This is box five
This is box six
html
Expand Edit in Playground Copy 

<section class="hc-grid">
  <div class="hc-grid--default">
    <div class="bg-gray-200 rounded p-4">This is box one</div>
    <div class="bg-gray-200 rounded p-4">This is box two</div>
    <div class="bg-gray-200 rounded p-4">This is box three</div>
    <div class="bg-gray-200 rounded p-4">This is box four</div>
    <div class="bg-gray-200 rounded p-4">This is box five</div>
    <div class="bg-gray-200 rounded p-4">This is box six</div>
  </div>
</section>

The basic grid has four breakpoints beyond the minimum, and creates the following columns. The breakpoints are based on on the size of the .hc-grid container, not the viewport.

Breakpoint Minimum width Number of columns
Mobile 0 1
Small screens (sm) 24rem 2
Tablets (md) 48rem 3
Desktops (xl) 80rem 4
Displays (2xl) 96rem 6

App layout grids

We have a handful of layout templates for app content screens as well. These grids still require the use of .hc-grid, but rely on the existence of the .hc-app-content @container to be a parent. You can read more about this in the Layout documentation.

Standard layout

This is the standard app content template that has a title bar at the top, and then a 2/3 width content section next to a 1/3 width right sidebar.

Append the class .hc-grid--standard to the .hc-grid container.

The first child is the title bar, with class .hc-grid-title. The second child is the content section with class .hc-grid-content. The third is the right sidebar with class .hc-grid-sidebar.

This is the page title

Content section subtitle

This is the main content section. On small screens it stacks above the collapsed sidebar.

On large screens, it's 2/3 the width of this row.

Sidebar title

This is sidebar. It moves to the right on md screens and above.

html
Expand Edit in Playground Copy 

<div class="hc-app-content">
  <section class="hc-grid hc-grid--standard">
    <div class="hc-grid-title">
      <h1 class="hc-title">This is the page title</h1>
      <button class="hc-button hc-button--primary hc-theme">Primary CTA</button>
    </div>
    <div class="hc-grid-content">
      <h2 class="hc-section hc-section--margin">Content section subtitle</h2>
      <p class="hc-body">This is the main content section. On small screens it stacks above the collapsed sidebar.</p>
      <p class="hc-body">On large screens, it's 2/3 the width of this row.</p>
    </div>
    <div class="hc-grid-sidebar">
      <h3 class="hc-category">Sidebar title</h3>
      <p class="hc-body">This is sidebar. It moves to the right on <code>md</code> screens and above.</p>
    </div>
  </section>
</div>

If you exclude the .hc-grid-sidebar, the grid layout will adapt to a simple 1 column, 2 row grid.

Single column feed

Use the single column feed when you have a timeline or card-based feed display. The feed has a max width and centers itself inside the main content pane.

Create a single column feed grid by appending the class .hc-grid--feed to the .hc-grid container.

Announcements

AG Andrew Gioia in Fallhaven Elementary School 20 hours ago
Early Dismissal Reminder

Reminder! We will have early dismissal on Wednesdsay, January 28th. The school will release at 12:00p. Please make the proper arrangements.

AT Abbey Thering in Fallhaven Elementary School 20 hours ago
🍁 Elementary School Fall Festival Description 🍂

Join us for a fun-filled day at our Annual Fall Festival, where students, families, and teachers come together to celebrate the magic of the autumn season! Our school campus will transform into a festive wonderland featuring colorful decorations, crisp fall air, and activities for all ages.

Children can enjoy classic carnival games, a pumpkin patch, and craft stations where they can create their own fall-themed masterpieces. Families won’t want to miss the hayride, face painting, and our Harvest Photo Booth—perfect for capturing seasonal memories!

A variety of fall treats will be available, including caramel apples, popcorn, warm cider, and other tasty festival favorites. Local vendors and school clubs will host booths with goodies, crafts, and interactive activities.

Whether you're joining in on the games, exploring crafts, or simply enjoying the festive atmosphere, the Fall Festival is the perfect way to celebrate community, creativity, and the joy of the season.

We can’t wait to see you there! 🍂✨

Fall Festival event information
html
Expand Edit in Playground Copy 

<div class="hc-app-content !bg-gray-100">
  <section class="hc-grid hc-grid--feed">
    <div class="hc-grid-title">
      <h1 class="hc-title">Announcements</h1>
      <button class="hc-button hc-button--primary">
        <i class="hc-icon hc-icon--filter"></i>
        Filters
      </button>
    </div>
    <div class="hc-grid-content">
      <!-- card -->
      <div class="rounded-lg xl:rounded-xl shadow-card bg-white overflow-hidden">
        <div class="bg-info-600 text-white flex flex-row justify-between px-4 lg:px-6 py-2 lg:py-3 items-center">
          <div class="flex flex-row gap-3 items-center">
            <span class="hc-avatar bg-success-100">AG</span>
            <span class="flex flex-col justify-start">
              <span class="md:text-md leading-tight line-clamp-1">
                <a href="#" class="hc-link hc-link--contrast">Andrew Gioia</a> in <a href="#" class="hc-link hc-link--contrast">Fallhaven Elementary School</a></span>
              <span class="text-gray-200 text-sm">20 hours ago</span>
            </span>
          </div>
          <button class="hc-button hc-button--icon hc-button--tertiary hc-button--contrast" aria-label="More options">
            <i class="hc-icon hc-icon--more-vertical"></i>
          </button>
        </div>
        <div class="bg-white p-4 lg:px-6 flex flex-col gap-3">
          <strong class="text-lg">Early Dismissal Reminder</strong>
          <p class="hc-body">
            Reminder! We will have early dismissal on Wednesdsay, January 28th. The school will release at 12:00p. Please make the proper arrangements.
          </p>
        </div>
        <div class="bg-white border-t border-gray-500 px-4 py-2 flex justify-between">
          <button class="hc-button hc-button--tertiary">
            <i class="hc-icon hc-icon--heart"></i>
            React
          </button>
          <button class="hc-button hc-button--tertiary">
            <i class="hc-icon hc-icon--message"></i>
            Comment
          </button>
          <button class="hc-button hc-button--tertiary">
            <i class="hc-icon hc-icon--chart"></i>
            Delivery data
          </button>
        </div>
      </div>
      <!-- card -->
      <div class="flex flex-col rounded-lg xl:rounded-xl shadow-card bg-white overflow-hidden">
        <div class="bg-[#EC7013] text-white flex flex-row justify-between px-4 lg:px-6 py-2 lg:py-3 items-center">
          <div class="flex flex-row gap-3 items-center">
            <span class="hc-avatar bg-indigo-100">AT</span>
            <span class="flex flex-col justify-start">
              <span class="md:text-md leading-tight line-clamp-1">
                <a href="#" class="hc-link hc-link--contrast">Abbey Thering</a> in <a href="#" class="hc-link hc-link--contrast">Fallhaven Elementary School</a></span>
              <span class="text-gray-200 text-sm">20 hours ago</span>
            </span>
          </div>
          <button class="hc-button hc-button--icon hc-button--tertiary hc-button--contrast" aria-label="More options">
            <i class="hc-icon hc-icon--more-vertical"></i>
          </button>
        </div>
        <div class="bg-cover h-48 w-full" style="background-image: url('https://i.imgur.com/816Kgpu.jpeg');"></div>
        <div class="bg-white p-4 lg:px-6 flex flex-col gap-3">
          <strong class="text-lg">🍁 Elementary School Fall Festival Description 🍂</strong>
          <p>
            Join us for a fun-filled day at our Annual Fall Festival, where students, families, and teachers come together to celebrate the magic of the autumn season! Our school campus will transform into a festive wonderland featuring colorful decorations, crisp fall air, and activities for all ages.
          </p>
          <p>
            Children can enjoy classic carnival games, a pumpkin patch, and craft stations where they can create their own fall-themed masterpieces. Families won’t want to miss the hayride, face painting, and our Harvest Photo Booth—perfect for capturing seasonal memories!
          </p>
          <p>
            A variety of fall treats will be available, including caramel apples, popcorn, warm cider, and other tasty festival favorites. Local vendors and school clubs will host booths with goodies, crafts, and interactive activities.
          </p>
          <p>
            Whether you're joining in on the games, exploring crafts, or simply enjoying the festive atmosphere, the Fall Festival is the perfect way to celebrate community, creativity, and the joy of the season.
          </p>
          <p>
            We can’t wait to see you there! 🍂✨
          </p>
        </div>
        <div class="bg-white border-t border-gray-500 px-4 lg:px-6 py-3 flex flex-row gap-2">
          <i class="hc-icon hc-icon--calendar hc-icon--20"></i>
          <a href="https://connect.schoolstatus.com/schools/classtag-demo-school/activities/10582365" class="hc-link">
            Fall Festival event information
          </a>
        </div>
        <div class="bg-white border-t border-gray-500 px-4 py-2 flex justify-between">
          <button class="hc-button hc-button--tertiary">
            <i class="hc-icon hc-icon--heart"></i>
            React
          </button>
          <button class="hc-button hc-button--tertiary">
            <i class="hc-icon hc-icon--message"></i>
            Comment
          </button>
          <button class="hc-button hc-button--tertiary">
            <i class="hc-icon hc-icon--chart"></i>
            Delivery data
          </button>
        </div>
      </div>
    </div>
    </div>
  </section>
</div>

Position and display utilities

Tailwind ships with a complete set of positional classes—flexbox, grid, alignment, padding, margin, etc. You can get complete control with these if you’re building your app with Tailwind.

If you want to access a smaller set of curated classes for common use cases, use the Honeycomb utilities!

Content alignment

One of the most common layout tasks is aligning content along a horizontal axis. These might feel idiosyncratic or overly specific, but these patterns come up repeatedly.

Action buttons

Align N buttons vertically centered with a default gap between them. Buttons move to the right if the container is bigger than the content.

Use the class .hc-align--buttons on any wrapping element.

html
Expand Edit in Playground Copy 

<div class="hc-align--buttons">
  <button class="hc-button hc-button--secondary">Left button</button>
  <button class="hc-button hc-button--secondary">Second button</button>
  <button class="hc-button hc-button--primary hc-theme">CTA button</button>
</div>

Justify-between, except when there’s one item

Align two items to the left and right, with space-between when they’re both present. If you want to account for positioning the children to the left or right when they exist alone, add the class .hc-align--left or .hc-align--right to that child element.

Note that background colors have been manually added to show the wrapping elements.

Section title

Section title

html
Expand Edit in Playground Copy 

<div class="hc-align--between bg-white">
  <h2 class="hc-section hc-align--left">
    Section title
  </h1>
  <div class="hc-align--buttons">
    <button class="hc-button hc-button--secondary">Left button</button>
    <button class="hc-button hc-button--secondary">Second button</button>
    <button class="hc-button hc-button--primary hc-theme">CTA button</button>
  </div>
</div>
<div class="hc-align--between bg-white">
  <h2 class="hc-section hc-align--left">
    Section title
  </h1>
</div>
<div class="hc-align--between bg-white">
  <div class="hc-align--buttons hc-align--left">
    <button class="hc-button hc-button--secondary">Left button</button>
    <button class="hc-button hc-button--secondary">Second button</button>
    <button class="hc-button hc-button--primary hc-theme">CTA button</button>
  </div>
</div>
<div class="hc-align--between bg-white">
  <div class="hc-align--buttons hc-align--right">
    <button class="hc-button hc-button--secondary">Left button</button>
    <button class="hc-button hc-button--secondary">Second button</button>
    <button class="hc-button hc-button--primary hc-theme">CTA button</button>
  </div>
</div>

Content display

You can target certain screen sizes with Honeycomb convenience classes in the format .hc-screen--{breakpoint}. For instance, to show content only for md screens and up, use the class .hc-screen--md.

Append the class suffix --only if you only want to show the element at that specific breakpoint and up to the next.

Append the suffix --down if you want to show the element below that breakpoint, hiding it at the next breakpoint and above. For instance, if you only want to show a certain element on sm screens and smaller, use the class .hc-screen--sm--down.

This will appear for md screens and above: MD This will only appear between lg and xl widths: LG only This will only appear between xl and 2xl widths: XL only This will only appear on screens below the xl breakpoint: LG down This will only appear on 2xl screens and above. 2XL
html
Expand Edit in Playground Copy 

<span>
  This will appear for <code>md</code> screens and above:
  <span class="hc-badge hc-badge--info hc-screen--md">MD</span>
</span>
<span>
  This will only appear between <code>lg</code> and <code>xl</code> widths:
  <span class="hc-badge hc-badge--success hc-screen--lg--only">LG only</span>
</span>
<span>
  This will only appear between <code>xl</code> and <code>2xl</code> widths:
  <span class="hc-badge hc-badge--warning hc-screen--xl--only">XL only</span>
</span>
<span>
  This will only appear on screens below the <code>xl</code> breakpoint:
  <span class="hc-badge hc-badge--danger hc-screen--lg--down">LG down</span>
</span>
<span>
  This will only appear on <mode>2xl</code> screens and above.
  <span class="hc-badge hc-badge--attend hc-screen--2xl">2XL</span>
</span>