css grid布局的首次使用
2024-10-19 08:58:10
首先来看一下效果图
接下来废话不多说，先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 610px;
height: 610px;
margin: 100px auto;
display: grid;/* 说明以grid布局 */
grid-template-columns: 200px 5px 200px 5px 200px;/* 网格划分为五列，包括间隔 */
grid-template-rows: 200px 5px 200px 5px 200px;/* 网格划分为五行，包括间隔 */
}
.a{
grid-column-start: 1;/* 单元格开始的那条列线 */
grid-column-end: 2;/* 单元格结束的那条列线 */
grid-row-start: 1;/* 单元格开始的那条行线 */
grid-row-end: 4;/* 单元格结束的那条行线 */
background: #5a5eff;
}
.b{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #F672E2;
}
.c{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #FDF505;
}
.d{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #F90B0B;
}
.e{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 6;
background: #41a8ff;
}
.f{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
background: #10FDD0;
}
.g{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #16FA07;
}
</style>
</head>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
</div>
</body>
</html>
代码就这么多，还是挺简单的。
网格如下划分成五列，则用了6条列线
划分为五行，则用了6条行线
（请随意吐槽这张图片）
主要可以参考，http://www.tuicool.com/articles/F3mMJzv，里面有较详细的说明，图片也比较清晰，个人推荐可以参考一下
结合这张图片，应该很好理解的
还是很容易理解 的。
最新文章
- WIN32服务程序（二）：卸载服务
- <页面里折合与打开>
- Android手机_软件安装目录
- POJ 3270 【组合数学】
- Silverlight 结合ArcGis 使用inforwindow
- 使用curl,libcurl访问Https
- 从Git到GitHub，详细教程
- 持续集成之 Spring Boot 实战篇
- SpringBoot报错：Failed to load ApplicationContext( Failed to bind properties under 'logging.level')
- [解决]CXF wsdl2java 生成代码存在的一些问题
- linux中结构体对齐【转】
- supervisor的command执行两条命令
- linux系统添加指定uid和gid的用户和组
- aps.net webform框架下页面服务器端控件和html控件用法
- Hive 中Join的专题---Join详解
- Qt5布局管理（二）——QDockWidget停靠窗口类
- python基础学习1-双层装饰器(实现登陆注册)
- Java中的平衡树
- Anaconda Install
- javascript定义对象的方式