css3 grid CSS3 grid-rows 属性

css3 grid

CSS3 Grid 是 CSS3 中新增的一种布局方式，它可以让我们更加灵活地定义元素的位置和大小，使得布局更加有条理。

CSS3 Grid 的核心是 grid 布局，它可以将页面分割成行和列，然后在这些行列之间放置元素。它可以让我们更加方便地定义元素的位置、大小、间距、对齐方式、重叠方式等。

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

CSS3 Grid 还有一些高级特性，例如可以使用 grid-template-areas 来声明不同的区域，然后将元素放到不同的区域中。这样就可以很方便地实现复杂的布局效果。

 
.container {     
    display: grid;  
    grid-template-areas: "header header" "sidebar content";  

    .header {     
        grid-area: header;  

        .sidebar {     
            grid-area: sidebar;  

            .content {    
                grid-area: content;  

            } 

        } 

    } 

 }  

此外，CSS3 Grid 还有一些其他特性，例如可以使用 minmax() 来声明表格中单元格的最小/最大尺寸；也可以使用 auto-fill/auto-fit 来声明表格中单元格的数量。这些特性都能够帮助我们更好地实现复杂的布局效果。

CSS3 grid-rows 属性

grid-rows: length|%|none|inherit;