首页 / CSS / CSS网格布局(grid)的用法详解
CSS网格布局(grid)的用法详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS网格布局(grid)的用法详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5614字,纯文字阅读大概需要9分钟。
内容图文
![CSS网格布局(grid)的用法详解](/upload/InfoBanner/zyjiaocheng/411/d64d63dcbe894207846e7344cfeb93e9.jpg)
我们先来看一下容器框架
#(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”。此外,可以为每个单元设置单元的背景颜色。
同样,在Google Chrome中显示相同的文件。将显示如下所示的效果。
在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指定的位置。
Google Chrome中显示的效果如下所示。
以上就是CSS网格布局(grid)的用法详解的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS网格布局(grid)的用法详解全部内容,希望文章能够帮你解决CSS网格布局(grid)的用法详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。