Html 配置文件上表格的响应显示

我试图在个人资料上制作一些卡片，但我有点硬编码。。有绝对的位置和各种疯狂的。。 我怎么能像这里一样用4张桌子做一个网格呢

所以实际上有4张桌子 \代码是

    <div class="account-table-content profile-page-content">
        <div class="table">
            <table>
                <tbody>
                    {!! view_render_event(
                    'bagisto.shop.customers.account.profile.view.table.before', ['customer' => $customer])
                    !!}

                    <tr>
                        <td>{{ __('shop::app.customer.account.profile.fname') }}</td>
                        <td>{{ $customer->first_name }}</td>
                    </tr>

                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.first_name.after', ['customer' => $customer]) !!}

                    <tr>
                        <td>{{ __('shop::app.customer.account.profile.lname') }}</td>
                        <td>{{ $customer->last_name }}</td>
                    </tr>

                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.last_name.after', ['customer' => $customer]) !!}

                    <tr>
                        <td>{{ __('shop::app.customer.account.profile.dob') }}</td>
                        <td>{{ $customer->date_of_birth ?? '-' }}</td>
                    </tr>

                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.date_of_birth.after', ['customer' => $customer]) !!}

                    <tr>
                        <td>{{ __('shop::app.customer.account.profile.email') }}</td>
                        <td>{{ $customer->email }}</td>
                    </tr>

                    <tr>
                        <td><a href="javascript:void(0)" @click="showModal('deleteProfile')" class="aProfile">
                            {{ __('shop::app.customer.account.address.index.delete') }}
                        </a></td>
                        <td><a href="{{ route('customer.profile.edit') }}" class="aProfile">
                            {{ __('shop::app.customer.account.profile.index.edit') }}
                        </a></td>
                    </tr>

                    {!! view_render_event(
                    'bagisto.shop.customers.account.profile.view.table.after', ['customer' => $customer])
                    !!}

                </tbody>
            </table>
        </div>

{！！查看\u渲染\u事件(
'bagisto.shop.customers.account.profile.view.table.before'，['customer'=>$customer]）
!!}
{{{（'shop:：app.customer.account.profile.fname'）}
{{$customer->first_name}
{！！view\u render\u事件（'bagisto.shop.customers.account.profile.view.table.first\u name.after'，['customer'=>$customer]）
{{{（'shop:：app.customer.account.profile.lname'）}
{{$customer->last_name}
{！！view_render_event（'bagisto.shop.customers.account.profile.view.table.last_name.after'，['customer'=>$customer]）
{{{（'shop:：app.customer.account.profile.dob'）}
{{$customer->出生日期？？？'-'}
{！！view_render_event（'bagisto.shop.customers.account.profile.view.table.date_of_birth.after'，['customer'=>$customer]）
{{{（'shop:：app.customer.account.profile.email'）}
{{$customer->email}
{！！查看\u渲染\u事件(
'bagisto.shop.customers.account.profile.view.table.after'，['customer'=>$customer]）
!!}

我想用同一个类乘以4次，得到4个响应表，就像一个网格，我怎么能做到呢？ 现在我有4个类，比如绝对位置，顶部和左侧