loading

v33.3.1

select option

Layout

Use layout components to define page grid and control spacing

Overview

Visual guidelines are available in our Figma library here.

There are two types of layout components in ink:

Grid components are used to define page layout grid:

  • Grid contains rows to create page structures
  • Row is used to group any number of columns together
  • Column divides rows horizontally up to 12 parts

Spacing components are used to control spacing around and between components:

  • HStack distributes elements evenly in a horizontal stack
  • VStack distributes elements evenly in vertical stack
  • Tiles lays out items in a column grid
  • Box adds one-off spacing around a component

Example

How grid and spacing components are used to define a basic page layout and set gap spacing between content tiles in a horizontal stack:

<Grid>
<Row>
<Column
mobile="12-of-12"
tabletLandscape="8-of-12"
offsetTabletLandscape="2-of-12"
desktopLarge="6-of-12"
offsetDesktopLarge="3-of-12"
>
<HStack spacing="gutter">
<Tile>Content tile 1</Tile>
<Tile>Content tile 1</Tile>
<Tile>Content tile 1</Tile>
</HStack>
</Column>
</Row>
</Grid>

Grid components

ink primer is the quickest and easiest way to get started using grid components. Refer to the page layout guidelines for recommendations on grid configurations in different scenarios.

  • Grid, Row, and Column are used to establish a page's 12-column layout
  • Gaps between each Column is 32px
  • Props are used with Grid to create context-aware responsiveness
  • There is a 56px margin offset for Grid which gets reduced to 32px on smaller screen sizes
  • Don't use Grid with Page

Spacing components

  • Distribute multiple UI elements using HStack, VStack, and Tiles
  • Box can be used to apply one-off spacing

Scale

ValueNamed preset (recommended)
0none
4xsmall
8small
12medium
16large
20gutter - standard spacing between two container elements (e.g. Block, Tile, Banner)
24
32xlarge
48

Built-in spacing

  • Select ink components come with built-in bottom spacing (e.g. Banner, Block)
  • Use the trim property of these components to remove built-in spacing, especially when they're used inside a spacing component

Example

The two markups below produce identical visuals:

<VStack spacing="gutter">
<Banner text="This is a banner text" trim />
<Block title="Title" trim>
Content
</Block>
<CustomText>Text</CustomText>
</VStack>
<Banner text="This is a banner text" />
<Block title="Title">
Content
</Block>
<CustomText>Text</CustomText>

Responsive Techniques

ink primer is the quickest and easiest way to get started with responsive layout, but you can easily customize grid layout or spacing for each of ink's breakpoints:

Breakpoints

NameRange
Mobile0 to 599px
Tablet portrait600px to 899px
Tablet landscape900px to 1199px
Desktop1200px to 1535px
Desktop large1536px to 2000px

Responsive Grid

Use Column's properties for grid allocation and grid offset to customize page layout.

Example

<Grid>
<Row>
<Column
mobile="12-of-12"
tabletLandscape="9-of-12"
offsetTabletLandscape="3-of-12"
desktop="8-of-12"
desktopLarge="5-of-12"
offsetDesktopLarge="4-of-12"
>
Header
</Column>
</Row>
<Row>
<Column
mobile="12-of-12"
tabletLandscape="3-of-12"
desktop="2-of-12"
offsetDesktop="1-of-12"
offsetDesktopLarge="2-of-12"
>
Navigation
</Column>
<Column mobile="12-of-12" tabletLandscape="5-of-12" desktop="5-of-12" desktopLarge="3-of-12">
Content
</Column>
<Column mobile="hidden" tabletLandscape="4-of-12" desktop="3-of-12" desktopLarge="2-of-12">
Accessory
</Column>
</Row>
<Row>
<Column
mobile="12-of-12"
tabletLandscape="9-of-12"
offsetTabletLandscape="3-of-12"
desktop="8-of-12"
desktopLarge="5-of-12"
offsetDesktopLarge="4-of-12"
>
Footer
</Column>
</Row>
</Grid>

Responsive Spacing

The layout and spacing properties of VStack, HStack, Tiles, and Box are responsive properties so an array of properties can be provided to be mapped to different breakpoints.

Example 1

Use gutter as HStack's gap spacing for tabletLandscape and up, and medium for everything below

<HStack spacing={["medium", null, "gutter"]}>
<Tile>Tile 1</Tile>
<Tile>Tile 2</Tile>
<Tile>Tile 3</Tile>
</HStack>

Example 2

Use gutter as HStack's gap spacing for tabletLandscape and up, medium for tabletPortrait, and small for mobile

<HStack spacing={["small", "medium", "gutter"]}>
<Tile>Tile 1</Tile>
<Tile>Tile 2</Tile>
<Tile>Tile 3</Tile>
</HStack>

Advanced

Responsive logic

The useWindowWidth hook provides breakpoint booleans for custom responsive logic.

const { isMobile, isTabletPortrait, isTabletLandscape, isDesktop, isDesktopLarge } = useWindowWidth()

In components like Tiles, the prop columns accepts an array that maps to:

[isMobile, isTabletPortrait, isTabletLandscape, isDesktop, isDesktopLarge]

This means setting columns={[1, 2, 3, 4, 5]} will display

  • 5 columns at isDesktopLarge
  • 4 at isDesktop
  • 3 at isTabletLandscape
  • 2 at isTabletPortrait
  • 1 column at isMobile

Customization

Additional, the Box component works as a wrapper and provides extended access to layout properties. However this should be used very sparingly!

Is this page helpful?