In this lesson we’ll create the Grid layout primitive component, that will allow us (together with other layout primitives) to create almost any complex layout without writing custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component. Grid is a shortcut to create CSS Grid layouts: it’s based on the [Box](https://egghead.io/lessons/react-creating-the-box-layout-primitive-component-using-styled-system) component but defines `display: grid`. We can use it like this: ```jsx © Chuck Norris, 1940 Have a nice day! ``` This will create two `
`s stacked one on top of the other with a 8 pixels (third step in our spacing scale) gap on narrow screens and aligned at the left and right sides of the CSS Grid container on wide screens. **We’ll use following libraries:** * [styled-components](https://styled-components.com/) * [Styled System](https://styled-system.com/) You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project: ``` npm install styled-components styled-system ``` **Useful links and documentation:** * [Styled System docs](https://styled-system.com/getting-started/) * [Build a Box](https://styled-system.com/guides/build-a-box) * [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)