DEV Community

Cover image for Gentle grid introduction with smooth example
Alireza Razinejad
Alireza Razinejad

Posted on

Gentle grid introduction with smooth example

#css #figma #angualr #grid

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

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

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]]
Enter fullscreen mode Exit fullscreen mode

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

Order component 
<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>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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 
<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>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

Now let's say we would implement our desktop layout πŸ’»

@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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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 πŸ™‹β€β™‚οΈ

Top comments (0)

Read next

developersai0021 profile image

Glam Up My Markup: Camp Activities

Sai Charith Puligilla -

teddydavidson245 profile image

Camp Activities Glamed Up!

Newbie_Ted -

dillonheadley profile image

HTMZ inspired form subission

Dillon Headley -

altay profile image

Chrome DevTools: CSS Overview Panel

Altay Karakuş -