Newskit Logo
View Github

Layout

Grid Layout

This component is a beta, this documentation page is still a work in progress.

Used to construct a visual grid for responsive page layout. A Proxy for CSS grid.

Interactive Demo

This demo allows you to preview the Grid Layout component, its variations, and configuration options.

columnGap
rowGap
1import React from 'react';
2import { GridLayout } from 'newskit';
3
4export default () => (
5  <GridLayout columnGap="space020" rowGap="space020" />
6);
7

API

Below are the properties for the Grid Layout component:

GridLayout

Grid Layout has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
GridLayoutItem

Grid Layout Item has a range of props that can be used to define an appropriate experience for different use cases. Use this component within the NewsKit GridLayout component.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?