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

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

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

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

语法如下:

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 >

输出:

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

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

  • 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

.

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

支持的浏览器:支持的浏览器CSS |网格属性下面列出:

  • 谷歌浏览器
  • IE浏览器
  • 火狐浏览器
  • 歌剧
  • 苹果浏览器

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: