删除 CSS 网格中不需要的空间答案

【问题标题】：remove unwanted space in css grid删除 CSS 网格中不需要的空间
【发布时间】：2023-03-22 21:35:01
【问题描述】：

我用类网格容器制作了这个 div 并具有这种风格

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px 10px;
       
}

在这个网格容器中，我有这段代码，它会在从数据库中获取后回显“：

<div id='productMain' class='row col-md-4 visible-xs' style='overflow:hidden;'>

           <div>
            
              <a href='details.php?pro_id=$pro_id' >

                     <img class='img-responsive'  src='admin_area/product_images/$pro_img1' style='height:180;width:100%;border-radius:7px 7px 0px 0px;background:#f0f0f0'>
                    
                </a>   
               
               </div>
             <div class='box'  style='border-radius:0px 0px 5px 5px;'>
           
                      <h5 style='padding:0px;margin:0px'><strong>#$pro_title</strong><e style='font-family:serif'> <?php echo ; ?></e></h5> 

          <br />
           <i>   <i class='fa fa-clock-o'> $time </i></p> </i>
              

                   
           <ul style='list-style-type:none;'>
                 
                    <li  style='float:right ;width:50%' >
                   ".make_like($db,$custom_id,$pro_id)."
                    </li>
                    </ul>
             
                    <h5 class='price' style='float:left;'>NGN $pro_price </h5>
    
        <br>
                   <h5> 
                   </h5>
                   
                   </div>
   
   </div>

但不幸的是，在 fetch 之后它会在显示内容之前显示一个空格：查看图片grid error

【问题讨论】：

标签： html css grid

【解决方案1】：

使用弹性

在 CSS 上使用 flex 嵌套的网格，

将 flex-container 类添加到父 div 和 flex-item 为每个孩子

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    }

.flex-item  {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

【讨论】：