Layouts

A guide to creating common layouts for your pages.

Layouts, such as columns and grids, can be easily achieved using components and Tailwind flex and grid classes. They are equaly easy to make reponsive. Let's build a page that looks like this:

The navigation bar

First, let's add the navigation bar at the top:

<div className="flex flex-col">
  <div className="flex flex-row flex-none border-b items-center p-4 gap-4">
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>
  </div>
</div>

The page container uses a flex flex-col layout for a vertical layout. The navigation bar uses a flex flex-row layout to horizontally place its children links. flex-none indicates that the navigation bar should not grow vertically.

The sidebar

Let's add the sidebar:

<div className="flex flex-col">
  <div className="flex flex-row flex-none border-b items-center p-4 gap-4">
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>
  </div>
  <div className="flex flex-row flex-grow">
    <div className="flex flex-col flex-none p-4 gap-4 border-r">
      <a href="/">Post 1</a>
      <a href="/">Post 2</a>
      <a href="/">Post 3</a>
    </div>
  </div>
</div>

We've first added a main container (for the sidebar and content), which has the flex-grow class, indicating that it should fill as much as it can (vertically), and a flex flex-row class indicating that items within it should be positioned horizontally.

The sidebar has the class flex flex-col for its children links to be positioned in a column layout (that is, vertically).

The main content

Finally, we can add the main content.

<div className="flex flex-col">
  <div className="flex flex-row flex-none border-b items-center p-4 gap-4">
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>
  </div>
  <div className="flex flex-row flex-grow">
    <div className="flex flex-col flex-none p-4 gap-4 border-r">
      <a href="/">Post 1</a>
      <a href="/">Post 2</a>
      <a href="/">Post 3</a>
    </div>
    <div className="flex flex-col flex-grow p-4">
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
        <div className="bg-gray-100 h-32 rounded-md" />
      </div>
    </div>
  </div>
</div>

This container has the flex-grow class to make it fill the remaining space (horizontally). Furthermore, it has the grid grid-cols-2 sm:grid-cols-4 class, which takes care of positioning all the children in a grid layout. For small screens, two columns are used (grid-cols-2), and for large screens, four columns are used (grid-cols-4).

Adding the layout to a template

You will typically want to reuse such a layout for several pages, without having to copy it to each new page. Read the article on Templates for how to achieve this.

Copyright © 2022 Motif Land Inc. All rights reserved. This website is built with Motif.