由PHP创建的网格布局CSS无法正常工作

我正在使用PHP创建相关类别的选项卡（使用PODs关系选择-在PODs Free插件中创建），每个选项卡以网格格式显示其中3个类别的产品。但是，我的网格没有按预期显示，我无法找出问题的原因。我在另一个项目中使用了相同的网格CSS，所以我不确定是什么原因导致了布局的行为。我将它与上一个项目中的其他CSS和html进行了比较，唯一不同的是网格位于选项卡内容中

我希望产品与中心对齐，并且间距相等

我的代码如下：

<?php 
/**
*Plugin Name: Related Categories Plugin
*Description: This plugin adds related categories 
*/

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

// END ENQUEUE PARENT ACTION

function gr_related_categories(){
    //get Pods object for current post
    $pod = pods( 'product', get_the_id() );
    $tabs='';
    $content='';
//get the value for the relationship field
$related = $pod->field( 'related_categories' );
$tabs.= '<style>
            /* Style the tab */
.tab {
    overflow: hidden;
    border: solid 1px #5500B5;
    background-color: #f1f1f1;
    text-align:center;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    float:none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color:black;
    display:inline-block;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
    border:solid 1px #5500B5;
    border-bottom:0px;
    border-top:0px;
}

/* Style the tab content */
.tabcontent {
    display: none;
    border: 1px solid #ccc;
    border-top: none;
    text-align:center;
}



.gr_related_category img{
    object-fit: cover;
    max-height:250px;
    height:250px;
    transition: transform .2s; /* Animation */
    border-radius:0px;
}
.gr_related_category img:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.gr_related_category{
    width:250px; 
    height:300px; 
    margin: 20px auto;  
    bakground-color:white; 
    border:solid 2px #5500B5; 
    text-align:center; 
    overflow: hidden;
    vertical-align: bottom;
    }

.gr_related_category_name{
    width:100%;
}
</style>';
if ( ! empty( $related ) ) {
    $tabs.='<div class="tab">';
    foreach ( $related as $rel ) { 
        $id = $rel[ 'term_id' ];
        $term=get_term($id, 'product_cat');

        $name = $rel['name'];
        $slug = $rel['slug'];
        $thumbnail_id = get_term_meta( $id, 'thumbnail_id', true );
        $image=wp_get_attachment_image($thumbnail_id, 'full');
        $cat_url=get_term_link($term);


        $tabs.='<button class="tablinks" onclick="openTab(event, \''.$name.'\' )">'.$name.'</button>';

        $args = array(
        'category' => array( $slug ),
        );

        $products = wc_get_products( $args );

        $content.='<div id="'.$name.'" class="tabcontent">';
        $content.='<div style=" width:100%; display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">';
        $counter=0;

        foreach ( $products as $item_id => $item_obj ) {
                if ($counter < 3){
                $counter=$counter+1;
                $item_data = $item_obj->get_data();
                $product_id=$item_data['id'];
                $title = get_the_title($product_id);
                $link = get_the_permalink($product_id);
                $image = get_the_post_thumbnail($product_id, 'full');
                $data ='<div class="gr_related_category"><a href="'.$link.'" target="blank">'.$image.'<h3 style="color:#5500B5;">'.$title.'</h3></a></div>';
                $content.=$data.'<br>';
                }
        }
        $content.='</div>';
        $content.='<a href='.$cat_url.' target="_blank"><h3 style="color:#5500B5;"\>See All '.$name.'</h3></a>';

        $content.='</div>';
    } //end of foreach
    $tabs.='</div>';
    $tabs.=$content;
    $tabs.='<script>

                function openTab(evt, tabName) {
                    var i, tabcontent, tablinks;
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                        tabcontent[i].style.display = "none";
                    }
                    tablinks = document.getElementsByClassName("tablinks");
                    for (i = 0; i < tablinks.length; i++) {
                        tablinks[i].className = tablinks[i].className.replace(" active", "");
                    }
                    document.getElementById(tabName).style.display = "block";
                    evt.currentTarget.className += " active";
                }
            </script>';
} //endif ! empty ( $related );
return $tabs;
}

add_shortcode('gr_related_categories', 'gr_related_categories');
?>

---

该问题是由标签位于错误位置引起的。它应该在foreach循环之外

                    foreach ( $products as $item_id => $item_obj ) {
                        if ($counter < 3){
                        $counter=$counter+1;
                        $item_data = $item_obj->get_data();
                        $product_id=$item_data['id'];
                        $title = get_the_title($product_id);
                        $link = get_the_permalink($product_id);
                        $image = get_the_post_thumbnail($product_id, 'full');
                        $data ='<div class="gr_related_category"><a href="'.$link.'" target="blank">'.$image.'<h3 style="color:#5500B5;">'.$title.'</h3></a></div>';
                        $content.=$data;
                }
        }
        $content.='</div></br>';

foreach（$item\u id=>$item\u obj形式的产品）{
如果（$counter<3）{
$counter=$counter+1；
$item_data=$item_obj->get_data（）；
$product_id=$item_数据['id']；
$title=获取标题（$product\u id）；
$link=获取永久链接（$product\u id）；
$image=get_the_post_缩略图（$product_id，'full'）；
$data=''；
$content.=$data；
}
}
$content.='
'；
然后，首先比较PHP脚本生成的HTML结构和可以工作的静态HTML版本……pods函数来自插件？我比较了HTML，唯一的区别是它现在在选项卡内容中，而不仅仅是在一个pods中。插件用于创建产品和类别之间的关系允许我选择显示哪些类别。@Vel