Vue Notus Grid

We’ve decided to create three main elements for our grid for this project.

Grid Components

Container

Containers are the most basic layout element in Notus Vue and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

container px-4 mx-auto

In some cases, where we wanted to align items we used flex-box utility classes, for example:

container px-4 mx-auto flex flex-wrap items-center justify-between

container mx-auto items-center flex flex-wrap

Row

Rows are wrappers for columns. Each column has horizontal padding for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

flex flex-wrap

Column

For the column part of the grid, we’ve used the following base classes:

w-full px-4

This means, that on small devices, each column will default to full width.

And for other types of devices, you can use the {$breakpoint}:w-{$width} classes, where {$breakpoint} can be one of sm, md, lg, and xl. And the {$width} can be one of:

A number from 0 to 64
A division of type x/y, where x and y can be numbers from 1 to 12

For example:

w-full md:w-5/12 px-4

Which means, that this column on medium width devices will take 5 out of 12 columns grid, i.e. ~ 41.6% of the screen width, and on smaller devices, will take a full width.

Breakpoints:

Anything prefixed by the sm: will take place for devices with a width of at least 640px
Anything prefixed by the md: will take place for devices with a width of at least 768px
Anything prefixed by the lg: will take place for devices with a width of at least 1024px
Anything prefixed by the xl: will take place for devices with a width of at least 1280px

Examples

Note: we’ve added some extra styles for the inner elements of the columns so that you see the example a bit better

Equal Width

Three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. For this, we’ve also added the flex-1 utility class on each of the column components.

One of three columns

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">One of three columns</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">One of three columns</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">One of three columns</span>
    </div>
  </div>
</div>

Same example as the one from above, but instead of using flex-1 class, we’ll change the w-full one to w-1/3, and the effect will be the same:

One of three columns

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-1/3 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">One of three columns</span>
    </div>
    <div class="w-1/3 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">One of three columns</span>
    </div>
    <div class="w-1/3 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">One of three columns</span>
    </div>
  </div>
</div>

Here are two grid layouts that apply to every device and viewport. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">1 of 2</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">2 of 2</span>
    </div>
  </div>
  <div class="flex flex-wrap">  
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">1 of 3</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">2 of 3</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">3 of 3</span>
    </div>
  </div>
</div>

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">1 of 3</span>
    </div>
    <div class="w-8/12 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">2 of 3 (wider)</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">3 of 3</span>
    </div>
  </div>
  <div class="flex flex-wrap">  
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">1 of 3</span>
    </div>
    <div class="w-5/12 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">2 of 3 (wider)</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">3 of 3</span>
    </div>
  </div>
</div>

Variable width content

Use {$breakpoint}: classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 flex-1 md:w-2/12 md:flex-none">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">1 of 3</span>
    </div>
    <div class="w-full px-4 flex-1 md:w-auto md:flex-none">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">Variable width content</span>
    </div>
    <div class="w-full px-4 flex-1 md:w-2/12 md:flex-none">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">3 of 3</span>
    </div>
  </div>
  <div class="flex flex-wrap">  
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">1 of 3</span>
    </div>
    <div class="w-full px-4 flex-1 md:w-auto md:flex-none">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">Variable width content</span>
    </div>
    <div class="w-full px-4 flex-1 md:w-2/12 md:flex-none">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">3 of 3</span>
    </div>
  </div>
</div>

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a .w-full where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-full with some responsive display utilities.

column

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full"></div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
  </div>
</div>

Breakpoints

For grids that are the same from the smallest of devices to the largest, use the simple column classes and w-{$width} classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to the simple column classes.

column

column of 8

column of 4

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="w-8/12 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column of 8</span>
    </div>
    <div class="w-4/12 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column of 4</span>
    </div>
  </div>
</div>

Stacked to horizontal

Using a single set of sm:w-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

column 8

column 4

column

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 sm:w-8/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column 8</span>
    </div>
    <div class="w-full px-4 sm:w-4/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column 4</span>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="w-full px-4 sm:flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 sm:flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
    <div class="w-full px-4 sm:flex-1">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column</span>
    </div>
  </div>
</div>

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

12 and md 8

6 and md 4

column of 6

<div class="container px-4 mx-auto">
  <div class="flex flex-wrap">
    <div class="w-full px-4 md:w-8/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">12 and md 8</span>
    </div>
    <div class="w-1/2 px-4 md:w-4/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">6 and md 4</span>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="w-1/2 px-4 md:w-4/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">6 and md 4</span>
    </div>
    <div class="w-1/2 px-4 md:w-4/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">6 and md 4</span>
    </div>
    <div class="w-1/2 px-4 md:w-4/12">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">6 and md 4</span>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="w-1/2 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column of 6</span>
    </div>
    <div class="w-1/2 px-4">
      <span class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100">column of 6</span>
    </div>
  </div>
</div>