Layouts

A layout system allows you to visually organize your content and adapt to screen size, ensuring consistency and hierarchy.

Column 1/3

Column 2/3

Column 3/3

Variations

One Column Layout

Copy as:HTMLReact

Column 1/1

copydone

<!-- Component: One column even layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 md:col-span-8 lg:col-span-12">Column 1/1</div>
    </div>
  </div>
</section>
<!-- End One column even layout -->

Two Columns Layout

Copy as:HTMLReact

Column 1/2

Column 2/2

copydone

<!-- Component: Two columns even layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-6">Column 1/2</div>
      <div class="col-span-4 lg:col-span-6">Column 2/2</div>
    </div>
  </div>
</section>
<!-- End Two columns even layout -->

Three Columns Layout

Copy as:HTMLReact

Column 1/3

Column 2/3

Column 3/3

copydone

<!-- Component: Three columns even layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4">Column 1/3</div>
      <div class="col-span-4">Column 2/3</div>
      <div class="col-span-4 ">Column 3/3</div>
    </div>
  </div>
</section>
<!-- End Three columns even layout -->

Four Columns Layout

Copy as:HTMLReact

Column 1/4

Column 2/4

Column 3/4

Column 4/4

copydone

<!-- Component: Four columns even layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-3">Column 1/4</div>
      <div class="col-span-4 lg:col-span-3">Column 2/4</div>
      <div class="col-span-4 lg:col-span-3">Column 3/4</div>
      <div class="col-span-4 lg:col-span-3">Column 4/4</div>
    </div>
  </div>
</section>
<!-- End Four columns even layout -->

Six Columns Layout

Copy as:HTMLReact

1/6

2/6

3/6

4/6

5/6

6/6

copydone

<!-- Component: Six columns even layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-2">1/6</div>
      <div class="col-span-4 lg:col-span-2">2/6</div>
      <div class="col-span-4 lg:col-span-2">3/6</div>
      <div class="col-span-4 lg:col-span-2">4/6</div>
      <div class="col-span-4 lg:col-span-2">5/6</div>
      <div class="col-span-4 lg:col-span-2">6/6</div>
    </div>
  </div>
</section>
<!-- End Six columns even layout -->

Two Uneven Columns Five & Seven

Copy as:HTMLReact

Column 5/12

Column 7/12

copydone

<!-- Component: Five and Seven uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-5">Column 5/12</div>
      <div class="col-span-4 lg:col-span-7">Column 7/12</div>
    </div>
  </div>
</section>
<!-- End Five and Seven uneven columns layout -->

Two Uneven Columns Seven & Five

Copy as:HTMLReact

Column 7/12

Column 5/12

copydone

<!-- Component: Seven and Five uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-7">Column 7/12</div>
      <div class="col-span-4 lg:col-span-5">Column 5/12</div>
    </div>
  </div>
</section> <!-- End Seven and Five uneven columns layout -->

Two Uneven Columns Four & Eight

Copy as:HTMLReact

Column 4/12

Column 8/12

copydone

<!-- Component: Four and Eight uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4">Column 4/12</div>
      <div class="col-span-4  lg:col-span-8">Column 8/12</div>
    </div>
  </div>
</section>
<!-- End Four and Eight uneven columns layout -->

Two Uneven Columns Eight & Four

Copy as:HTMLReact

Column 8/12

Column 4/12

copydone

<!-- Component: Eight and Four uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-8">Column 8/12</div>
      <div class="col-span-4">Column 4/12</div>
    </div>
  </div>
</section>
<!-- End Eight and Four uneven columns layout -->

Two Uneven Columns Three & Nine

Copy as:HTMLReact

Column 3/12

Column 9/12

copydone

<!-- Component: Three and Nine uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
      <div class="col-span-4 lg:col-span-9">Column 9/12</div>
    </div>
  </div>
</section>
<!-- End Three and Nine uneven columns layout -->

Two Uneven Columns Nine & Three

Copy as:HTMLReact

Column 9/12

Column 3/12

copydone

<!-- Component: Nine and Three uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-9">Column 9/12</div>
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
    </div>
  </div>
</section>
<!-- End Nine and Three uneven columns layout -->

Three Uneven Columns Six Three Three

Copy as:HTMLReact

Column 6/12

Column 3/12

copydone

<!-- Component: Six, Three amd Three uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-6">Column 6/12</div>
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
    </div>
  </div>
</section>
<!-- End Six, Three amd Three uneven columns layout -->

Three Uneven Columns Three Six Three

Copy as:HTMLReact

Column 3/12

Column 6/12

Column 3/12

copydone

<!-- Component: Three, Six and Three uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
      <div class="col-span-4 lg:col-span-6">Column 6/12</div>
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
    </div>
  </div>
</section>
<!-- End Three, Six and Three uneven columns layout -->

Three Uneven Columns Three Three Six

Copy as:HTMLReact

Column 3/12

Column 6/12

copydone

<!-- Component: Three, Three and Six uneven columns layout -->
<section>
  <div class="container px-6 m-auto">
    <div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
      <div class="col-span-4 lg:col-span-3">Column 3/12</div>
      <div class="col-span-4 lg:col-span-6">Column 6/12</div>
    </div>
  </div>
</section>
<!-- End Three, Three and Six uneven columns layout -->

Usage

Use any of the layouts to ensure that your content will be visual consistent on all screen resolutions.

Specs

The layout consists of the following elements:

Container: the container keeps the content at the center of the screen with a 2rem (32px) horizontal margin (to avoid having the content at the edge of the screen). You can remove this class to create layouts that would expand to the full width of the screen.
Row: a grid element that uses a 12-column layout for large screens, 8 columns for medium screens and 4 columns for small screens. In all layouts, a 1.5rem (24px) gutter is separating the columns from each other.
Column: all content is placed within columns.

Layouts

Variations

One Column Layout

Two Columns Layout

Three Columns Layout

Four Columns Layout

Six Columns Layout

Two Uneven Columns Five & Seven

Two Uneven Columns Seven & Five

Two Uneven Columns Four & Eight

Two Uneven Columns Eight & Four

Two Uneven Columns Three & Nine

Two Uneven Columns Nine & Three

Three Uneven Columns Six Three Three

Three Uneven Columns Three Six Three

Three Uneven Columns Three Three Six

Usage

Specs

Check out the latest release!