引导卡中的图像如何使用网格？

只需使用img标签，就可以将图像添加到Bootstrap卡中。但是我们不能直接使用相同的方法将图像网格放置到引导卡中，因为这会导致设计不正确。因此，要获得按流将图像网格放置到Bootstrap卡中。完美对齐的网格，我们需要在HTML代码中添加一些CSS。

处理方法：首先设置值显示：网格； div封装所有图像以将其转换为网格布局的过程。然后设置值grid-template-columns：auto;网格容器以指定网格布局中的列数。现在设置值的宽度：100％;以获得完美的网格。

以下示例说明了上述方法：

示例1：具有2列的图像网格，即2×2图像网格。

  

    Bootstrap Card
    
    
    
    
    
    
    
    
    
      
    
        .card {
            width: 20rem;
            margin: 2rem;
        }
          
        .image-grid-container {
            display: grid;
      
            /* For 2 columns */
            grid-template-columns: auto auto;
        }
        img {
            width: 100%;
        }
    

  

    
        
            
                
                
                
                
            
              
            
                Developer Guy
                  
                
                    Developer Guy love to develop
                    front-end and back-end
                
                  
                
                    See Profile
                
            
        
    

  

输出：

示例2：具有3列的图像网格，即3×3图像网格。

 
 
  
 
    Bootstrap Cards 
      
     
     
  
     
      
     
     
      
     
     
      
     
     
    
        .card {
            width: 20rem;
            margin: 2rem;
        }
        .image-grid-container {
            display: grid;
              
            /* For 3 columns */
            grid-template-columns: auto auto auto;
        }
        img {
            width: 100%;
        }
    
 
  

     
         
            
                
                
                
                
                
                
                
                
                
             
             
                
                    Developer Guy
                 
                  
                
                    Developer Guy love to develop
                    front-end and back-end 
                 
                
                    See Profile
                 
            
        
    

  

输出：