Gentle grid introduction with smooth example

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 🧐

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 🤓

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

<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>

.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

<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>

.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 💻

@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 🙋‍♂️