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"
>
<HStackspacing="gutter">
<Tile>Content tile 1</Tile>
<Tile>Content tile 1</Tile>
<Tile>Content tile 1</Tile>
</HStack>
</Column>
</Row>
</Grid>
Grid
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 components
Grid, Row, and Column are used to establish a page's 12-column layout
gutter - standard spacing between two container elements (e.g. Block, Tile, Banner)
24
32
xlarge
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:
<VStackspacing="gutter">
<Bannertext="This is a banner text"trim/>
<Blocktitle="Title"trim>
Content
</Block>
<CustomText>Text</CustomText>
</VStack>
<Bannertext="This is a banner text"/>
<Blocktitle="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
Name
Range
Mobile
0 to 599px
Tablet portrait
600px to 899px
Tablet landscape
900px to 1199px
Desktop
1200px to 1535px
Desktop large
1536px 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
<HStackspacing={["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
<HStackspacing={["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: