CSS Grid 和 place-items 在一起

在本文中，我们将看到如何将 CSS grid 和 place-items 属性一起使用来排列网页中的元素。

place-items不是专门用于CSS 网格的，它也可以与其他属性一起使用。

脚步：

• 用类容器创建三个 div
• 每个 div 将包含三个带有类框的 div。
• 将 class initial 添加到第一个 div，中间添加到第二个 div，最后添加到第三个 div。

示例： HTML

html

    
        
Place-items in start
        
        

            
Item 1
            
Item 2
            
Item 3
        
        
Place-items in middle
        
        

            
Item 1
            
Item 2
            
Item 3
        
        
Place-items in end
        
        

            
Item 1
            
Item 2
            
Item 3
        
    

• 使用 CSS 网格将每个容器中的项目排列成三列。
• 将属性place-items:start添加到类 initial 的 div 中，同样将place-items:center和place-items:end 分别添加到类 middle 和 end 的 div 中。

示例： CSS

html

完整代码：

html

    
        
    
    
        
Place-items in start
        
        

            
Item 1
            
Item 2
            
Item 3
        
        
Place-items in middle
        
        

            
Item 1
            
Item 2
            
Item 3
        
        
Place-items in end
        
        

            
Item 1
            
Item 2
            
Item 3
        
    

输出：