CSS Grid网格 - 芒果文档

📌 相关文章

📜 CSS Grid网格

📅 最后修改于: 2020-11-05 08:53:59 🧑 作者: Mango

CSS网格

网格可以定义为水平线和垂直线的交集。 CSS网格布局将页面分为主要区域。它根据层，位置和大小定义了从HTML原语构建的控件各部分之间的关系。 Grid属性提供了具有行和列的基于网格的布局系统。它使网页的设计变得容易，而无需定位和浮动。

与表格类似，它使用户可以将元素对齐为行和列。但是与表相比，使用CSS网格设计布局很容易。我们可以使用grid-template-rows和grid-template-columns属性在网格上定义列和行。

浏览器(例如Google Chrome，Internet Explorer，Firefox，Safari和Opera)支持CSS网格属性。

网格容器

我们可以通过将显示属性设置为元素上的grid或inline-grid来定义网格容器。

网格容器包含放置在行和列内的网格项目。

让我们看一个CSS中网格的简单示例。

例

 
 
  
 

     
 
  
   
     
        One 
        Two 
        Three     
        Four 
        Five 
        Six 
        Seven 
        Eight

让我们看看一些速记属性：

grid-template-columns：用于指定列的大小。
grid-template-rows：用于指定行大小。
grid-template-areas：用于使用命名项指定网格布局。
grid-auto-rows：用于指定行的自动大小。
grid-auto-columns：用于指定列的自动大小。
grid-auto-flow：用于指定如何放置自动放置的项目以及自动的行大小。

在下面的示例中，我们包括一些上述速记属性。现在，让我们看一下使用某些属性的示例：

例

 
 
  
 
  
     
 
  
 
  
     
        One 
        Two 
        Three 
        Four 
        Five 
        Six 
        Seven 
        Eight

证明内容属性

它用于在容器内对齐整个网格。它包括以下值：

均匀空间：在列之间或周围提供相等的空间。
环绕空间：它在列周围提供相等的空间。
间隔：在列之间提供相等的空间。
中心：用于在容器中间对齐网格。
start：用于在容器的开头对齐网格。
end：用于在容器的末端对齐网格。

注意：请注意，对于justify-content属性的任何影响，网格的总宽度应小于容器的宽度。

让我们通过一个示例来了解此属性以及值。

例








   CONTAINER WITH SPACE-EVENLY VALUE

  1
  2
  3  


CONTAINER WITH SPACE-AROUND VALUE

   1
   2
   3  
 

 CONTAINER WITH SPACE-BETWEEN VALUE

   1
   2
   3  
 

 CONTAINER WITH END VALUE
 
    1
    2
    3  
  

  CONTAINER WITH START VALUE

   1
   2
   3  
 

 CONTAINER WITH CENTER VALUE

   1
   2
   3

align-content属性

它用于在容器内垂直对齐整个网格。

注意：请注意，对于align-content属性的任何影响，网格的总高度应小于容器的高度。

align-content属性的值与justify-content属性的值相同。