# Display: metric - metricOptions containerClass

**URL:** <https://ask.selectfromuser.com/t/display-metric-metricoptions-containerclass/392>\
**Category:** 사용 팁\
**Tags:** metricoptions, containerclass\
**Created:** [3월 11, 2025, 7:42오전 UTC](https://ask.selectfromuser.com/t/display-metric-metricoptions-containerclass/392 "2025-03-11T07:42:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [3월 11, 2025, 7:42오전 UTC](https://ask.selectfromuser.com/t/display-metric-metricoptions-containerclass/392/1 "2025-03-11T07:42:36Z")

</div>

안녕하세요.

display: metric 사용시 metricOptions를 통해 여백과 컨테이너를 조절할 수 있습니다.

결과값들의 열을 맞추고 싶으신 경우 활용해보세요.

tailwindcss 사용법에 따라 `grid-cols-0 gap-0` 사용 가능합니다.

### 기본 예제

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/01ab790200236129ccc50cc1c784f39131855fb3.png)

```yaml
menus:
- path: metric-class
pages:
- path: metric-class
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: |
      SELECT 
        293383 as '전체 문제 수',
        82695 as '검수된 전체 문제 수 (주관식 or GOOD or BAD)',
        167375 as '서비스 가능한 전체 문제 수',
        53360 as '국어'
    display: metric    
    metricOptions:
      containerClass: grid grid-cols-4 gap-3
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: |
      SELECT 
        28023 as '국어2',
        10157 as '국어3',
        177998 as '수학',
        46547 as '수학2'
    display: metric    
    metricOptions:
      containerClass: grid grid-cols-4 gap-3
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: |
      SELECT 
        129448 as '수학3',
        62025 as '영어',
        8125 as '영어2',
        27668 as '영어3'  
    display: metric    
    metricOptions:
      containerClass: grid grid-cols-4 gap-3            

```

### 적용 가능한 다른 꾸미기 옵션

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/51e0d0fd2de79388dda1b3e0027214a7af6195a4.jpeg)

```yaml
    display: metric
    containerClass: p-3
    
    metricOptions:
      containerClass: grid grid-cols-4 gap-2
      labelClass: text-sky-900/70 text-xs font-bold
      valueClass: text-sky-900 text-4xl font-bold

```