<div class="layout-wrap w-full shadow-up-2 border-2 border-navy mb-2">
  <div class="bg-base-white py-6 mx-auto text-center">Content</div>
</div>

The .layout-wrap element will have a maximum width of 1200px.

<div class="layout-content w-full p-4 bg-grey-30t shadow-up-2 border-2 border-navy mb-2">
  <div class="mx-auto p-6 bg-base-white text-center">Content</div>
</div>

The first child of the .layout-content element will have a maximum width of 600px intended for longform content.

<div class="layout-sidebar w-full tablet:flex shadow-up-2 border-2 border-navy mb-2">
  <div class="bg-base-white p-6">
    <div class="p-6">Sidebar</div>
  </div>
  <div class="bg-grey-30t p-6"></div>
</div>

The first child of the .layout-sidebar element will have a fixed width of 16rem for sidebar content. The second child’s width will stretch to the end of the viewport’s width.

<div class="grid grid-cols-4 gap-3 bg-grey-30t p-4 text-center shadow-up-2 border-2 border-navy mb-2">
  <div class="bg-base-white p-4">Cell A</div>
  <div class="bg-base-white p-4">Cell B</div>
  <div class="bg-base-white p-4">Cell C</div>
  <div class="bg-base-white p-4">Cell D</div>
  <div class="bg-base-white p-4">Cell E</div>
  <div class="bg-base-white p-4">Cell F</div>
  <div class="bg-base-white p-4">Cell G</div>
  <div class="bg-base-white p-4">Cell H</div>
  <div class="bg-base-white p-4">Cell I</div>
  <div class="bg-base-white p-4">Cell J</div>
</div>

Column layouts can be achieved by using Tailwindcss CSS grid display and column utilities.

• grid sets the display property to grid.
• grid-col-{{ number }} determines the number of columns in the grid. The column range is determined by the spacing token in the configuration. Currently, the range is 1 - 8.
• gap-{{ multiplier }} determines the gap between columns. The number multiplies the grid base value 8px. The multiplier range is determined by the spacing token in the configuration. Currently, the range is 1 - 8.

These properties are supported by responsive variants for different column settings in each major breakpoint.

The Figma file above contains shapes that map to available layouts, columns, and spacing dimensions for use in UI designs and prototypes.