关注我们

CSS - Grid(网格)

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

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

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

网格(Grid)集合

可以通过将显示属性设置为元素上的grid或inline-grid来定义网格集合，Grid网格集合包含放置在行和列内的网格项目。看一个CSS中网格的简单示例。

复制代码

<!DOCTYPE html> 
<html> 
  
<head> 

    <style> 
        .main { 
            display: grid; 
            grid: auto auto/auto auto auto auto; 
            grid-gap: 10px; 
            background-color: black; 
            padding: 10px; 
        } 
          
        .num { 
            background-color: grey; 
            text-align: center; 
            color: white;
            padding: 10px 10px; 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body>   
    <div class="main"> 
        <div class="num">One</div> 
        <div class="num">Two</div> 
        <div class="num">Three</div> 	
        <div class="num">Four</div> 
        <div class="num">Five</div> 
        <div class="num">Six</div> 
        <div class="num">Seven</div> 
        <div class="num">Eight</div> 
    </div> 
  
</body> 
  
</html>

看看一些速记属性:

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

在下面的示例中，无涯教程包括一些上述速记属性。现在，一起看一下使用某些属性的示例:

复制代码

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <style> 
        .main { 
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr; 
            grid-template-rows: 100px 250px 200px; 
            background-color: black;
            grid-gap: 10px; 
            padding: 20px; 
        } 
          
        .num { 
            background-color: lightgrey; 
            text-align: center; 
            padding: 20px 10px; 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div class="main"> 
        <div class="num">One</div> 
        <div class="num">Two</div> 
        <div class="num">Three</div> 
        <div class="num">Four</div> 
        <div class="num">Five</div> 
        <div class="num">Six</div> 
        <div class="num">Seven</div> 
        <div class="num">Eight</div> 
    </div> 
  
</body> 
  
</html>

justify-content 属性

它用于在集合内对齐整个网格。它包括以下值:

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-grid.html

来源：LearnFk无涯教程网

space-evenly - 它在列之间或列之间提供相等的空间。
space-around - 它在列周围提供相等的空间。
space-between - 列之间的间距相等。
center - 用于在集合的中间对齐网格。
start - 用于在集合的开头对齐网格。
end - 用于在集合的末端对齐网格。

Note: 请注意，对于证明内容属性的任何影响，网格的总宽度应小于集合的宽度。

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

复制代码

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container2 {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: red;
  padding: 10px;
}

.grid-container3 {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: green;
  padding: 10px;
}

.grid-container4 {
  display: grid;
  justify-content: end;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: violet;
  padding: 10px;
}

.grid-container5 {
  display: grid;
  justify-content: start;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: gray;
  padding: 10px;
}

.grid-container6 {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: blue;
  padding: 10px;
}

.num {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

   <b>CONTAINER WITH SPACE-EVENLY VALUE</b>
<div class="grid-container1">
  <div class='num'>1</div>
  <div class='num'>2</div>
  <div class='num'>3</div>  
</div>

<b>CONTAINER WITH SPACE-AROUND VALUE</b>
<div class="grid-container2">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>

 <b>CONTAINER WITH SPACE-BETWEEN VALUE</b>
<div class="grid-container3">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>

 <b>CONTAINER WITH END VALUE</b>
 <div class="grid-container4">
    <div class='num'>1</div>
    <div class='num'>2</div>
    <div class='num'>3</div>  
  </div>

  <b>CONTAINER WITH START VALUE</b>
<div class="grid-container5">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>

 <b>CONTAINER WITH CENTER VALUE</b>
<div class="grid-container6">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>
 
</body>
</html>