Gentle grid introduction with smooth example
Tags: css, figma, angualr, grid
Published: 2021-02-04 06:45:04

## What we are going to do 🥅

We plan to covert Figma design 🎨 into Angular component, with grid display CSS solution 🖼, so we would be able to add responsive solutions later using @media breakpoints

#### Let's look at our design 🧐
![Design](https://dev-to-uploads.s3.amazonaws.com/i/0wxey7guq1iod831ivvl.jpg)

Easy to catch that we have grid display that has 1 column with 100% width and 7 rows, now let's see how we will convert it into CSS solution. 😏

#### Convert it into CSS 🚛

As we are using Angular as our JS framework, it's good practice to have our components separated, so we have this kind of folder structure

But first, let's see our design in a simplified view 🤓

![Simple eye](https://dev-to-uploads.s3.amazonaws.com/i/908y9u1jvzirkdr8lmi1.jpg)

So, our folder structure will be like this 👇

```
-Order
|-components
|-|-top-toolbar
|-|-bottom-toolbar
|-Match Info
|-|-componsnts
|-|-|-component-a
|-|-|-component-b
|-|-|-component-c
|-|-|-component-d
|-|-|-component-e
|-|-match-info[.component[ts HTML css]]
|-order[.module .compontnt[ts html css]]
```

Okay, now we are ready to implement our templates and styles for order component, and match-info


###### Order component
```html
<div class="order-container">
  <app-top-toolbar title="Order" backUrl="/home/orders">
  </app-top-toolbar>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
  <app-bottom-tabs></sr-bottom-tabs>
</div>
```

```scss
.order-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas:
    "header"
    "content"
    "bottom";
  grid-template-rows: 3rem auto 78px;
  grid-template-columns: 100%;
}

app-top-toolbar {
  grid-area: header;
}
.content {
  grid-area: content;
  overflow-x: scroll;
}
app-bottom-tabs {
  grid-area: bottom;
}
```

As we can see, first we introduced `grid-template-areas` so we would be able to easily track each cell and place elements there.

For example, app-top-toolbar now will have its own room to rest in.

It is way easier than using `grid` or `grid-row/column`. 🤗

And that's it!

We just implemented our root grid display layout, as we having top and bottom toolbars, `content` container should be able to scroll in case of longer height than the viewport, so we can find `overflow-x` to `scroll`.

###### match-info.component
```html
<div class="math-info-container">
  <app-component-a></app-component-a>
  <app-component-b></app-component-b>
  <app-component-c></app-component-c>
  <app-component-d></app-component-d>
  <app-component-e></app-component-e>
</div>
```

```scss
.math-info-container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-areas:
    "component-a"
    "component-b"
    "component-c"
    "component-d"
    "component-e";
  grid-template-rows: 246px 98px 225px 225px 191px;
  grid-template-columns: 100%;
}

app-component-a {
  grid-area: component-a;
}

app-component-b {
  grid-area: component-b;
}

app-component-c {
  grid-area: component-c;
}

app-component-d {
  grid-area: component-d;
}

app-component-e {
  grid-area: component-e;
}
```

Now let's say we would implement our desktop layout 💻

```scss
@media screen and (min-width: 975px) {
  .math-info-container {
    grid-template-areas:
      "component-a component-b component-b"
      "component-a component-c component-c"
      "component-a component-d component-e";
    grid-template-rows: 353px 450px 191px;
    grid-template-columns: 11.5rem auto 15rem;
  }
}
```

We only needed to change grid style, and done! 😊

And that's all we needed to have our grid layout converted from our Figma design that is able to change into a new layout on breakpoint change.

Thank you for reading 🙏
Hope it was useful 😊

Stay Safe 🙋‍♂️