争怎路由网/网站教程/内容

CSS网格布局(grid)的用法详细说明

网站教程2022-11-04 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
网页中的布局是多种多样的,合适的布局可以让网页更加美观,使用CSS的网格布局,您可以使用带有简单描述的网格布局创建复杂的列。在本文中,我们基于一个简单的例子介绍了CSS的Grid Layout介绍。

我们先来看一下容器框架

#(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: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}
.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

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGrid.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
    <div class="GridItem4">内容4</div>
    <div class="GridItem5">内容5</div>
    <div class="GridItem6">内容6</div>
    <div class="GridItem7">内容7</div>
    <div class="GridItem8">内容8</div>
  </div>
  </body>
  </html>

说明:

下面的容器的CSS描述创建一个4行×2行的网格。

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}

网格的每个元素的CSS将是(GridItem 1~GridItem 8)。我们为每个网格定义网格单元。为网格的每个单元格更改背景颜色。

.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}

显示结果

使用Firefox浏览器显示上述HTML文件。将显示如下所示的效果。创建2行×4列的网格,并在每个单元格中显示字符串“item n”。此外,可以为每个单元设置单元的背景颜色。

360截图20181114144500180.jpg

同样,在Google Chrome中显示相同的文件。将显示如下所示的效果。

360截图20181114144607901.jpg

在IE浏览器中无法完成网格显示并且显示已折叠。

所有网格中都没有单元格的示例

虽然前面的例子介绍了那里是在小区内的所有网格的选项的情况下,它会如果在所有网格的任何项目甚至工作。以下是网格中稀疏(离散)单元格的示例。

代码

创建以下CSS,HTML文件。

SimpleGridSparse.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;    
    background-color:#E0E0E0;
}
.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

SimpleGridSparse.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridSparse.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>
  </body>
  </html>

说明:

通过以下代码,网格的外框是2行×4列的网格。

 display: grid;  
 grid-template-columns: 160px 160px 160px 160px;  
 grid-template-rows: 120px 120px;

网格的单元部分的CSS如下。这次它是一个2×4 8格的网格,但我们只在里面安排了3个单元格。容器的第一行中的第二列,第二行中的单元的第三列,并把内容的帧在三个地方中的第一行中的单元的第四列。

.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

网格的HTML部分。描述网格框架内的三个div框架。

<div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>

显示结果

我们将在Firefox浏览器中显示上述HTML。将显示如下所示的效果。内容框架放置在CSS指定的位置。

360截图20181114150806425.jpg

Google Chrome中显示的效果如下所示。

360截图20181114150910425.jpg

以上就是CSS网格布局(grid)的用法详解的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



……