asb_cloud_front/src/pages/Measure/View.jsx

import { Empty } from 'antd';
import {Grid, GridItem} from '../../components/Grid'

export const View = ({columns, item}) => {
  if (!item || !columns?.length)
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>

  const colsCount = 3
  const viewItems = columns.map( (column, i) => {
    const row = Math.floor(i / colsCount) + 1
    const colb = i % colsCount

    return <>
        <GridItem 
          //style={{width:'100%', border:'1px solid red'}}
          row={row} 
          col={colb*2 + 1}
          background='#00000005'        
          border='1px solid #FFFE'
        >
          {column.title}
        </GridItem>
        <GridItem 
          //style={{width:'50%', border:'1px solid blue'}}
          row={row} 
          col={colb*2 + 2}
          border='1px solid rgba(0, 0, 0, 0.05)'
          justifycontent='right'
          marginright='16px'
          fontWeight='bold'
          textalign='right'
        >
            {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
        </GridItem>
    </>
  })

  return <>
    <Grid>
      {viewItems}
    </Grid>
  </>
}