CSS的grid怎么用

本文小编为大家详细介绍“CSS的grid怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS的grid怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联专注于网站建设，为客户提供成都网站制作、网站建设、外贸网站建设、网页设计开发服务，多年建网站服务经验，各类网站都可以开发，高端网站设计，公司官网，公司展示网站，网站设计，建网站费用，建网站多少钱，价格优惠，收费合理。

我们先来看一下容器框架

#(id名){

display:grid;

grid-template-columns:(第一列宽度)(第二列宽度)......(第n列宽度);

grid-template-rows:(第一行高)(第二行高)......(第n行高);

}

或者

.(class名){

display:grid;

grid-template-columns:(第一列宽度)(第二列宽度)......(第n列宽度);

grid-template-rows:(第一行高)(第二行高)......(第n行高);

}

还有一种设置内联网格的方法。

#(id名){

display:inline-grid;

grid-template-columns:(第一列宽度)(第二列宽度)......(第n列宽度);

grid-template-rows:(第一行高)(第二行高)......(第n行高);

}

或者

.(class名){

display:inline-grid;

grid-template-columns:(第一列宽度)(第二列宽度)......(第n列宽度);

grid-template-rows:(第一行高)(第二行高)......(第n行高);

}

网格框架（项目框架）

为成为网格框架的元素指定以下CSS。

#(id名){

grid-column:（列方向的网格的开始位置）/（列方向的网格的结束位置）;

grid-row:（行方向的网格的开始位置）/（行方向的网格的结束位置);

}

或者

.(class名){

grid-column:（列方向的网格的开始位置）/（列方向的网格的结束位置）;

grid-row:（行方向的网格的开始位置）/（行方向的网格的结束位置);

}

或

#(id名){

grid-column-start:(列方向的网格的开始位置);

grid-column-end:(列方向的网格的结束位置);

grid-row-start:(行方向的网格的开始位置);

grid-row-end:(行方向的网格的结束位置);

}

或者

.(class名){

grid-column-start:(列方向的网格的开始位置);

grid-column-end:(列方向的网格的结束位置);

grid-row-start:(行方向的网格的开始位置);

grid-row-end:(行方向的网格的结束位置);

}

描述示例

使用网格线指定网格的起始位置和结束位置。

在下面的代码的情况下，单元的宽度是从第二栅格的垂直线到第四栅格的垂直线。

grid-column:2/4;

代码示例

创建以下CSS、HTML文件。

SimpleGrid.css

.Container{

display:grid;

grid-template-columns:160px160px160px160px;

grid-template-rows:120px120px;

border:solid#ff6a001px;

}

.GridItem1{

grid-column:1/2;

grid-row:1/2;

background-color:#ff9c9c;

}

.GridItem2{

grid-column:2/3;

grid-row:1/2;

background-color:#ffcb70;

}

.GridItem3{

grid-column:3/4;

grid-row:1/2;

background-color:#fffd70;

}

.GridItem4{

grid-column:4/5;

grid-row:1/2;

background-color:#b0ff70;

}

.GridItem5{

grid-column:1/2;

grid-row:2/3;

background-color:#7ee68d;

}

.GridItem6{

grid-column:2/3;

grid-row:2/3;

background-color:#7ee6e2;

}

.GridItem7{

grid-column:3/4;

grid-row:2/3;

background-color:#95a7f5

}

.GridItem8{

grid-column:4/5;

grid-row:2/3;

background-color:#d095f5;

}

SimpleGrid.html

内容1