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

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像素
并将第二行的高度设置为
【CSS如何使用grid属性（布局图解示例）】200像素
并将每一列的宽度设置为
156px
.