CSS grid with Styled Components - An Example

INTRODUCTION

One of the best tutorials to learn CSS Grid is Wes Bos' CSS Grid course. I wanted to experiment one of his code samples using Styled Components. Here I am with his code converted for styled components. For live code editing, please checkout this codesandbox.

HOW TO RUN

Please clone this repo and run the following commands.

yarn

yarn start

HIGHLIGHTS

Some of the topics in styled components that are covered in this example:

• createGlobalStyle

  Please refer /src/GlobalStyles.js

• ThemeProvider

  Please refer /src/GlobalStyles.js and /src/App.js

• css helper function

  ${props =>
      props.open
        ? css`
            max-height: 500px;
            transform: rotateX(0);
          `
        : css`
            max-height: 0;
            transform: rotateX(90deg);
          `}

  Please refer /src/components/MenuList.js