java网格布局 设置行高,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