Layout

Containers

Each breakpoint creates a container class by default. Containers are the most basic layout elements in a layout. They are primarily used to encapsulate the width of a website.

Before using a container, make sure to keep the following in mind:

With that being said, it is also important to know that each breakpoint mentioned in Responsive design creates a container with a default margin on the side. Hence, the inner width of a container is calculated after the margin is applied.

A detailed breakdown of each screen size and their viewport size with the margins applied are listed below. You can always increase the screen size in your config file.

What does 100% inner container width mean?

When the viewport reaches a minimum width of 640 px, the container turns 100% fluid, using the width of the device as container width.

This approach will help in creating layouts that adapt to the screen sizes of mobile devices. There are many combinations of screen sizes that may be available on various mobile devices. Moreover, there is the possibility of a website being viewed in a portrait or landscape orientation on a device. Hence, utilising a 100% fluid layout provides the ability to adapt content and elements for any screen size.

Remember;

The design system offers templates as a guide towards creating responsive layouts. However, when you are designing the layouts for specific pages, you must take into consideration the various device sizes that the user may use to view your website.

Hence, the layout has to be mobile first, with a design that starts at 320 px and remains fluid until 640 px.

Fluid containers

Containers also have the ability to be fluid from the start and ignore breakpoints. This means that the container takes the width of the device or viewport and adds a margin to it by default.

You may use a fluid container for a particular section, such as the hero section of a website with a full-screen background image.

However, when you use a fluid container on the entire website, consider users who view the website on screen resolutions such as 2500px or more. At this stage, your website may not provide the necessary aesthetic look that you may have visualised.

If you need to support larger screens, refer to 'Supporting larger screen sizes' for more information.

Grid

The grid system has been part of website design and development for a very long time. Using a grid provides designers and developers with the ability to align content vertically and horizontally.

However, it continues to evolve with the changes and trends in design.

The design system adopts the Tailwind width approach. In this sense, it does not:

• use a fixed width per column but rather calculates width dynamically in percentage.
• emphasise the use of a gap (i.e. space or gutter) between columns
• adapts to CSS Flex or CSS Grid and does now need rows as a seperate class.

The following is a visualisation of the grid system applied using all the possible classes available in the design system, adapted from TailwindCSS that allows you to control the columns of your grid.

The 6-column approach

By default, the width of each column is ` 1/6th ` of the container. This means the column is created in multiples of 16.33%. The example below shows how a CSS Grid layout can be applied with responsive changes to columns and a column gap of ` 24px `.

The approach with CSS Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
	<div>1/6</div>
	<div>1/6</div>
	<div>1/6</div>
	<div>1/6</div>
	<div>1/6</div>
	<div>1/6</div>
</div>

You may combine columns from 1 to 5. Refer to the example below, and also refer to Grid Column Start / End with flexbox and grid on TailwindCSS

<div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-6 gap-6">
	<div>1/6</div>
	<div class="col-auto lg:col-span-2">2/6</div>
	<div class="col-auto lg:col-span-3">3/6</div>
</div>

The approach with CSS Flexbox

The same example above - with a 6 column grid can also be achieved with CSS flexbox where you can control the width dynamically on breakpoints or turn off flexbox support on certain device sizes.

You must understand that flexbox as a property will not adjust the margin's in between. Hence, the example below shows flexbox applied for columns with no margin in between.

<div class="block lg:flex lg:flex-wrap lg:justify-start lg:items-center">
	<div class="w-full lg:w-2/6 xl:w-1/6">1/6</div>
	<div class="w-full lg:w-2/6 xl:w-1/6">1/6</div>
	<div class="w-full lg:w-2/6 xl:w-1/6">1/6</div>
	<div class="w-full lg:w-2/6 xl:w-1/6">1/6</div>
	<div class="w-full lg:w-2/6 xl:w-1/6">1/6</div>
	<div class="w-full lg:w-2/6 xl:w-1/6">1/6</div>
</div>

You can use width's for columns in the most flexible manner to achieve a ` 4-column approach` or a ` 3-column approach`

The 4-column approach creates containers in sizes of 25% each. A combination of these columns will create multiples of 25%. You may combine columns from 1 to 4, which is very useful in the creation of horizontal-stacked elements that consist of 4 items.

The 3 column approach creates containers in sizes of 33.33% each.

What about the traditional 12-column approach?

The 12-column grid approach (i.e. 1/12) has served as the pillar of consistent web design for many years, though without a real or substantial purpose.

Designers have now switched to the one-sixth, one-fourth, and one-third approaches for more realistic column widths. However, a 12-column grid may still be useful on larger screens. When designing a layout for a large screen, you may need to create a layout where there is very less emphasis on the sidebar and more on the content area. Essentially, 2/6 may be too big and 1/6 too small.

For this purpose, the Tailwind width approach does support 1/12 column sizes, as well. This approach may not be necessary in most cases, hence use it only when necessary.

Grid with spacing

By default, the width of a single column does not add space around it. However, traditionally, grid layouts would force a space (also known as a ` space ` or ` gutter `) between columns as opposed to modern-day web design, which may have elements with no spaces.

The use of spaces between columns is encouraged when the content needs to be visually split or to highlight a difference, like creating a set of cards to display the news on a homepage.

The width of the space can be controlled on each particular container or set of columns. Refer to Tailwind Space Between or Grid Column Start / End for details on available spacing.

The design system recommends a ` 24px ` for larger screens and the asthetic layout of the page can allow for adjustments to gaps between columns on smaller screen devices according to what looks best.

Spacing

Spacing is an important — and often overlooked — part of a design system. It is of paramount importance and must be used intelligently when designing a website. The term "make the website breathable" is often used by designers and it particularly refers to the spacing.

In essence, spacing isn't just about putting space between elements; it's a tool that can be used strategically to create clearer, more intuitive interfaces. As with any rule in design, understanding the rationale behind it is crucial because there will always be exceptions based on context.

The design system has increments of ` 2px ` until the base font size. Hence, upto ` 16px (1rem) `. After the base font size, the design system recommends using ` 4px ` as the increment upto ` 48px `.

The screen size and the layout you want to design may be open to spacing, and hence we recommend a proportional ratio, so ` 16 ` is twice as much spacing as ` 8 ` for example.