.o-layout__item.u-is-first { order: 1; }

.o-layout__item.u-is-last { order: 10; }

Usage

The layout object is used to quickly lay items out in flex columns on the page.

By default, each item in the layout will take up 100% width. This can be customised per item to achieve quick layout compositions.

Each layout item is given left and top spacing, to give it some breathing room from the other items.

The parent layout then applies a negative margin on the left and top, matching the value applied to the items. This off any excess margin and pulls the layout flush against the container edge.

This ensures the layout lays out your content, without adding any extra margin on the outsides. Great!

The Layout object in Captain provides a standardised way to define a layout of items, and then use it effortlessly.

For anything more advanced, we'd recommend looking at CSS Grids instead.

The negative margin

Note that the layout applies a negative margin that chops off the extra margin on the top and left items, pulling the layout flush against its container.

The following example shows the margin between the items, and the thick purple line is the container. Any margin outside the container is completely hidden and will not affect any other elements.

Changing the width

The layout works with the width utilities to allow the items to take up different sizes.

Modifiers

Spacing size

The layout class also includes spacing modifiers out of the box. The default config creates these classes from Tailwind's space config, which in turn defaults to Tailwind's global spacing config.

A layout without a modifier defaults to a spacing of 1rem on both the top and left side.

You can also size x and y spacing independently, using classes like layout--gap-x-8 and layout--gap-y-10.

Responsive

You're also able to adjust the size of the layout when the active breakpoint changes:

Customizing

Gap

To change the gaps available to the layout class, specify the name and gap size using the gap option in the theme.layout section of your config file:

// tailwind.config.js
module.exports = {
  theme: {
    layout: (theme) => ({
+     gap: {
+       DEFAULT: '1rem',
+       ...theme('space'),
+     },
    }),
  },
}

If you only have a single layout gap size, you can specify a single size as a shorthand:

// tailwind.config.js
module.exports = {
  theme: {
    layout: {
+     gap: '1rem',
    },
  },
}

Variants

By default, only responsive variants are generated for layout utilities.

You can control which variants are generated for the layout utilities by modifying the layout property in the variants section of your tailwind.config.js file.

For example, this config will disable all variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     layout: [],
    }
  }

Disabling entirely

If you don't plan to use the layout utilities in your project, you can disable them entirely by setting the layout property to false in the captain.plugins section of your config file:

  // tailwind.config.js
  module.exports = {
    captain: {
      plugins: {
        // ...
+       layout: false,
      }
    }
  }