CSS如何使用grid属性？布局图解示例

2021年3月24日14:14:45 发表评论 651 次浏览

grid是一个CSS属性, 提供基于网格的布局系统, 具有行和列, 从而可以更轻松地设计没有浮动和定位的网页。

语法如下：

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|
grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] 
grid-auto-rows / grid-template-columns|initial|inherit;

属性值：

值	描述
None	这是默认值, 没有为行和列提到特定的大小。
网格模板行/网格模板列	它用于区分行和列的大小。
网格模板区域	它用于使用命名项指定网格布局。
网格模板行/网格自动列	它用于指定自动尺寸(高度)并设置自动尺寸列。
网格自动行/网格模板列	它用于指定自动尺寸并设置自动网格尺寸列。
网格模板行/网格自动流网格自动列	它用于指定如何放置项目以及自动调整行和列的大小。
网格自动流网格自动行/网格模板列	它用于指定如何放置项目以及自动调整行和网格模板列的大小。

范例1：带有2行和4列的网格。

<!DOCTYPE html>
< html >
  
< head >
     < title >
         CSS | grid Property
     </ title >
     < style >
         .main {
             display: grid;
             grid: auto auto / auto auto auto auto;
             grid-gap: 10px;
             background-color: green;
             padding: 10px;
         }
          
         .gfg {
             background-color: lightgrey;
             text-align: center;
             padding: 25px 0;
             font-size: 30px;
         }
     </ style >
</ head >
  
< body >
  
     < h1 >Welcome to GFG </ h1 >
     < h3 >This tutorial is on CSS grid property</ h3 >
  
     < div class = "main" >
         < div class = "gfg" >1</ div >
         < div class = "gfg" >2</ div >
         < div class = "gfg" >3</ div >
         < div class = "gfg" >4</ div >
         < div class = "gfg" >5</ div >
         < div class = "gfg" >6</ div >
         < div class = "gfg" >7</ div >
         < div class = "gfg" >8</ div >
     </ div >
  
</ body >
  
</ html >

输出：

可以用作以下属性的简写属性：

grid-template-rows：指定行的大小。
网格模板列：这指定列的大小。
网格模板区域：这使用命名项目指定网格布局。
网格自动行：这指定行的自动大小。
网格自动列：这指定列的自动大小。
网格自动流：这指定如何放置自动放置的项目以及行的自动大小。

范例2：这是网格模板行和网格模板列.

<!DOCTYPE html>
< html >
  
< head >
     < title >
         CSS | grid Property
     </ title >
     < style >
         .main {
             display: grid;
             grid-template-columns: 156px 156px 156px 156px;
             grid-template-rows: 100px 200px;
             grid-gap: 5px;
             background-color: green;
             padding: 5px;
         }
          
         .gfg {
             background-color: lightgrey;
             text-align: center;
             padding: 20px 0;
             font-size: 30px;
         }
     </ style >
</ head >
  
< body >
     < h1 >Welcome to GFG </ h1 >
     < h3 >This tutorial is on CSS grid property</ h3 >
  
     < div class = "main" >
         < div class = "gfg" >1</ div >
         < div class = "gfg" >2</ div >
         < div class = "gfg" >3</ div >
         < div class = "gfg" >4</ div >
         < div class = "gfg" >5</ div >
         < div class = "gfg" >6</ div >
         < div class = "gfg" >7</ div >
         < div class = "gfg" >8</ div >
     </ div >
  
</ body >
  
</ html >

输出：

第一行的高度设置为

100像素

并将第二行的高度设置为

200像素

并将每一列的宽度设置为

156px