CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS Grid网格

Grid可以定义为一组相交的水平线和垂直线。CSS Grid布局将页面划分为主要区域。它在层、位置和大小方面定义了由HTML

基元构建的控件部分之间的关系。Grid 属性提供了一个具有行和列的基于网格的布局系统。它使网页设计变得容易，无需定位和浮动。


与表格类似，它使用户能够将元素对齐到行和列中。但与表格相比，使用CSS

Grid设计布局更容易。我们可以使用grid-template-rows和grid-template-columns属性在网格上定义列和行。


Grid属性在浏览器如支持谷歌Chrome，IE浏览器，火狐，Safari，和Opera。


Grid容器

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

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

让我们看一个简单的 CSS Grid示例。

例子 (Example)

<!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">一</div> 
        <div class="num">二</div> 
        <div class="num">三</div> 	
        <div class="num">四</div> 
        <div class="num">五</div> 
        <div class="num">六</div> 
        <div class="num">七</div> 
        <div class="num">八</div> 
    </div>  
</body>   
</html>
自己试试 »

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

  • grid-template-columns：用于指定列的大小。

  • grid-template-rows：用于指定行大小。

  • grid-template-areas：用于通过命名项指定网格布局。

  • grid-auto-rows：用于指定行的自动大小。

  • grid-auto-columns：用于指定列的自动大小。

  • grid-auto-flow：用于指定如何放置自动放置的项目和自动行大小。

在以下示例中，我们包含了上述一些速记属性。现在，让我们看看使用一些属性的例子：

例子 (Example)

<!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">一</div> 
        <div class="num">二</div> 
        <div class="num">三</div> 	
        <div class="num">四</div> 
        <div class="num">五</div> 
        <div class="num">六</div> 
        <div class="num">七</div> 
        <div class="num">八</div> 
    </div>   
</body>   
</html>
自己试试 »

justify-content 属性

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

  • space-evenly：它在列之间或列周围提供相等的空间。

  • space-around：它在列周围提供相等的空间。

  • space-between：它在列之间提供等量的空间。

  • center：用于对齐容器中间的网格。

  • start：用于在容器的开头对齐网格。

  • end：用于对齐容器末端的网格。

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

让我们通过一个例子来理解这个属性和值。

例子 (Example)

<!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>具有空间均匀价值的容器</b>
<div class="grid-container1">
  <div class='num'>1</div>
  <div class='num'>2</div>
  <div class='num'>3</div>  
</div>

<b>具有空间价值的容器</b>
<div class="grid-container2">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>

 <b>具有空间价值的容器</b>
<div class="grid-container3">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>

 <b>具有终值的容器</b>
 <div class="grid-container4">
    <div class='num'>1</div>
    <div class='num'>2</div>
    <div class='num'>3</div>  
  </div>

  <b>具有起始值的容器</b>
<div class="grid-container5">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div>

 <b>具有中心价值的容器</b>
<div class="grid-container6">
   <div class='num'>1</div>
   <div class='num'>2</div>
   <div class='num'>3</div>  
 </div> 
</body>
</html>
自己试试 »

对齐内容属性

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

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

该值对齐内容性质是一样的价值观证明内容属性。


上一主题 没有了 下一主题 CSS layout布局
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具