Get Started with CSS Grids(React + Styled Components)
Tags: react, html, css, javascript
Published: 2021-06-21 08:32:42

In this post we will learn about CSS grids and how you can make your own website with grids. So, let's get started.

#Introduction
In CSS there are several layouts present that are used to build a good and responsive design.
We have flex, multi-column layout, positioned layout, and many more but making a complex responsive design with these layouts can be very frustrating sometimes and that's where the grid layout comes into play.
Let's start by making a 2d layout so we can see how powerful the grid is.

#1. Create the project:
Since we will be using react for this project so let's start by creating the project.
If you have npm or yarn installed then you can install like this
```JS
npx create-react-app my-app
cd my-app
npm start
```
 or if you are following me then let's make a new code sandbox from here [codesandbox.io](https://codesandbox.io/)

After creating the react app let's add our beloved **styled-component** so we can start making our design.
![Packages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gwtnxq3rdcaosede5dm.png)
For react app
```JS
yarn add styled-components
```
#2. Edit the App.js:
Edit the App.js and let's create a basic HTML structure.
Let's import all the required packages and make a styled-component Container.
This Container will be the parent of all the components.

```JS
import "./styles.css";
import styled from "styled-components";
const  App = () => {
  return (
    <Container>
    </Container>
  );
}
export default App;
```
Now add the display property of Container as grid.

```JS
const Container = styled.div`
  display: grid;
  height: 100vh;
  color: white;
`;
```
Since we will be creating a 2d layout we can add grid related properties like `grid-template-rows` and `grid-template-columns` which will tell us how our grid is divided into parts.

```CSS
grid-template-rows: 0.2fr 1fr 0.5fr 0.5fr;
grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content content content"
    "sidebar footer footer footer";
text-align: center;
grid-gap: 0.25rem;

```
Here you might have come across a new property `grid-template-areas`. The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

Here's an interactive example from MDN if you want to play with `grid-template-areas` property.
[grid-template-areas.html ](https://interactive-examples.mdn.mozilla.net/pages/css/grid-template-areas.html)

Now let's quickly make the other components and style them.
The `grid-template-areas` we created in the container component we will pass them to their components.
```JS
 <NavBar>NavBar</NavBar>
 <Main>Main</Main>
 <SideBar>SideBar</SideBar>
 <ContentBox>
     <Content1>Content1</Content1>
     <Content2>Content2</Content2>
     <Content3>Content3</Content3>
 </ContentBox>
 <Footer>Footer</Footer>
``` 
```JS
const NavBar = styled.nav`
  background: #3a3a55;
  grid-area: nav;
  padding: 0.25rem;
`;
const Main = styled.main`
  background: #1f2128;
  color: white;
  grid-area: main;
  padding: 0.25rem;
`;
const SideBar = styled.div`
  background: #9aaab7;
  grid-area: sidebar;
  padding: 0.25rem;
`;

const ContentBox = styled.div`
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  align-items: center;
  grid-area: content;
  justify-content: center;
`;
const Content1 = styled.div`
  background: #a6b8b9;
  padding: 0.25rem;
  width: 100%;
  height: 100%;
`;
const Content2 = styled(Content1)``;
const Content3 = styled(Content1)``;
const Footer = styled.footer`
  background: #ff9637;
  grid-area: footer;
  padding: 0.25rem;
`;

```
After all this our app started taking shape and now we can see the whole layout.
![CurrentDesign](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7qqo9w40s1rtcpruavu.png)

Well we created what we aimed for a simple yet powerful design.
Hope you learned something from this and if you have any queries feel free to comment.
But wait where is the responsiveness.
Here
#3. Add media queries for responsiveness: 
Edit your container element and content box for responsive mobile design.
```JS
const Container = styled.div`
  display: grid;
  height: 100vh;
  grid-template-rows: 0.2fr 1fr 0.5fr 0.5fr;
  grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content content content"
    "sidebar footer footer footer";
  text-align: center;
  grid-gap: 0.25rem;
  transition: all 0.25s ease-in-out;
  @media (max-width: 550px) {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content"
      "footer";
  }
  color: white;
`;
const ContentBox = styled.div`
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  align-items: center;
  grid-area: content;
  justify-content: center;
  @media (max-width: 550px) {
    flex-direction: column;
  }
`;
``` 

**Final App**.
{% codesandbox 9s7g8 %}

The End