首页 > 其他好文 > 详细

grid

时间：2018-09-27 22:54:16 阅读：215 评论：0 收藏：0 [点我收藏+]

标签：div ali oct height 技术分享 http 效果图 type isp

HTML代码

<!DOCTYPE html>
<html>
<head>
<title>grid</title>
<link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
<div class="wrapper">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
</html>

css代码

.wrapper{
display: grid;
grid-template-columns: 100px 100px 100px; /*设置列的大小*/
grid-template-rows: 100px 100px; /*设置行的大小*/
}
.wrapper div{
border: 1px solid black;
text-align: center;
line-height: 100px;
}

效果图

技术分享图片

定义一个格子的大小

.one{
grid-column: 1 / 3; /*定义列的位置 */
grid-row: 1/ 3; /*定义行的位置*/
}

效果图

技术分享图片

标签：div ali oct height 技术分享 http 效果图 type isp

原文地址：https://www.cnblogs.com/yixiaoyu/p/9716025.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！