📜  CSS Grid 和 place-items 在一起

📅  最后修改于: 2021-08-31 08:19:10             🧑  作者: Mango

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

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

脚步:

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

示例: 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:

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

示例: CSS


完整代码:



    
        
    
    
        

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
        
    

输出: