부드러운 예제로 부드러운 그리드 도입

우리가 할 일 🥅

그리드 디스플레이 CSS 솔루션 🖼을 사용하여 Figma 디자인 🎨을 Angular 구성 요소로 변환할 계획이므로 나중에 @media 중단점을 사용하여 반응형 솔루션을 추가할 수 있습니다.

우리의 디자인을 살펴봅시다 🧐

너비가 100%인 열 1개와 행 7개가 있는 그리드 디스플레이가 있다는 것을 쉽게 파악할 수 있습니다. 이제 이를 CSS 솔루션으로 변환하는 방법을 살펴보겠습니다. 😏

CSS로 변환 🚛

Angular를 JS 프레임워크로 사용하고 있으므로 구성 요소를 분리하는 것이 좋습니다. 따라서 이러한 종류의 폴더 구조가 있습니다.

하지만 먼저 단순화된 보기에서 디자인을 살펴보겠습니다 🤓



따라서 폴더 구조는 다음과 같습니다 👇

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

자, 이제 주문 구성 요소 및 일치 정보에 대한 템플릿과 스타일을 구현할 준비가 되었습니다.


구성 요소 주문

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

보시다시피 먼저 각 셀을 쉽게 추적하고 요소를 배치할 수 있도록 grid-template-areas를 도입했습니다.

예를 들어 app-top-toolbar는 이제 휴식을 취할 수 있는 자체 공간을 갖게 됩니다.
grid 또는 grid-row/column 를 사용하는 것보다 훨씬 쉽습니다. 🤗

그리고 그게 다야!

상단 및 하단 도구 모음이 있으므로 루트 그리드 디스플레이 레이아웃을 구현했습니다. content 컨테이너는 뷰포트보다 높이가 더 긴 경우 스크롤할 수 있어야 합니다. 따라서 overflow-x에서 scroll까지 찾을 수 있습니다.


일치 정보.구성 요소

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

이제 데스크톱 레이아웃을 구현한다고 가정해 보겠습니다. 💻

@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;
  }
}

그리드 스타일만 변경하면 됩니다. 😊

이것이 중단점 변경 시 새로운 레이아웃으로 변경할 수 있는 Figma 디자인에서 그리드 레이아웃을 변환하는 데 필요한 전부입니다.

읽어주셔서 감사합니다🙏
도움이 되셨기를 바랍니다 😊

안전하게 지내세요 🙋‍♂️