grid位置分配【【位置分配】二】

最新推荐文章于 2024-03-11 16:39:49 发布

Fade Away

最新推荐文章于 2024-03-11 16:39:49 发布

阅读量715

点赞数

分类专栏： grid 文章标签： grid

本文链接：https://blog.csdn.net/qq_26239917/article/details/88990115

版权

grid 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先搭建基本模型

<style>
			.contaniner{
				width: 400px;
				height: 400px;
				display: -webkit-grid;
				display: grid;
				grid-template-columns:100px 100px 100px auto;
				grid-template-rows:100px 100px 100px auto;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="contaniner">
			<div class="ia"></div>
			<div class="ib"></div>
			<div class="ic"></div>
			<div class="id"></div>
			<div class="ie"></div>
			<div class="if"></div>
			<div class="ig"></div>			
			<div class="ih"></div>			
			<div class="ii"></div>			
			<div class="ij"></div>			
			<div class="ik"></div>			
			<div class="il"></div>			
			<div class="im"></div>			
			<div class="in"></div>			
			<div class="io"></div>			
			<div class="ip"></div>			
		</div>
	</body>

在这里插入图片描述

注释掉前15个元素

在这里插入图片描述

设置column 1–>4 row 1–>4

在这里插入图片描述

第二种写法：

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Fade Away

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
grid位置分配【【位置分配】二】

先搭建基本模型<style> .contaniner{ width: 400px; height: 400px; display: -webkit-grid; display: grid; grid-template-columns:100px 100px 100px auto; grid-template-rows:100px ...
复制链接

扫一扫