Gird Layout代码解释
2024-08-29 17:04:13
<div class="wrapper"> <!--定义一个类名为wrapper的div盒子-->
<div class="one">One</div> <!--定义一个类名为one的div盒子-->
<div class="two">Two</div> <!-- 定义一个类名为two的div盒子-->
<div class="three">Three</div><!--定义一个类名为three的div盒子-->
<div class="four">Four</div> <!--定义一个类名为four的div盒子-->
<div class="five">Five</div> <!--定义一个类名为five的div盒子-->
<div class="six">Six</div> <!-- 定义一个类名为six的div盒子-->
</div>
.wrapper { /*带有指定类(wrapper)的元素*/
display: grid; /*定义一个容器属性为网格布局*/
grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的列和行。
grid-template-columns和grid-template-rows属性来定义网格中的行和列。
这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。值的大小代表
轨道的大小,并且他们之间的空格表示网格线*/
grid-gap: 10px; /*定义垂直(水平)栏与垂直(水平)栏之间的间距*/
grid-auto-rows: minmax(100px, auto);/*用minmax()作为grid-auto-rows的值。自动创建的行高将会是
最小100px,最大为auto。 用auto意味着行的尺寸将会根据内容的大小来自动变换。*/
}
.one {
grid-column: 1 / 3;/*设置网格项目列方向的开始位置为1的网格线和结束为3的网格线*/
grid-row:; /*设置网格项目行方向的开始(结束)位置为1的网格线*/
}
.two {
grid-column: 2 / 4; /*设置网格项目列方向的开始位置为2的网格线和结束为4的网格线*/
grid-row: 1 / 3; /*设置网格项目行方向的开始位置为1的网格线和结束为3的网格线*/
}
.three {
grid-column:; /*设置网格项目列方向的开始(结束)位置为1的网格线*/
grid-row: 2 / 5; /*设置网格项目行方向的开始位置为2的网格线和结束为5的网格线*/
}
.four {
grid-column:; /*设置网格项目列方向的开始(结束)位置为3的网格线*/
grid-row:; /*设置网格项目行方向的开始(结束)位置为3的网格线*/
}
最新文章
- 从Elo Rating System谈到层次分析法
- Vertica数据查询优化
- 跟我一起学WCF(12)——WCF中Rest服务入门
- android开发系列之由ContentValues看到的
- Canvas 雾玻璃
- Python常见数据结构整理
- Oracle(1)之虚拟机下安装与简单使用
- python爬虫学习(三):使用re库爬取";淘宝商品";,并把结果写进txt文件
- Dream Spark ------spark on yarn ,yarn的配置
- 【工具推荐】ELMAH——可插拔错误日志工具(转)
- java多线程知识汇总(三)如何选择锁?如何加锁
- mybatis spring 框架整合
- 简单基础路径配置(单用JSP)EASYUI
- python3.5怎么打包编译
- IOS AppStore上线前测试
- 更改vsftpd默认的21端口
- sonarQube使用maven进行检查
- Oracle——索引,序列,触发器
- Windows下搭建QT环境
- Hyperledger Fabric (1.0)环境部署 chaincode【转】