网格布局之网格线编号定位

CHH54312024-06-20 11:55

网格布局之网格线编号定位

欢迎关注：xssy5431 小拾岁月

参考链接：https://mp.weixin.qq.com/s/aOO1G3r1kH-cHDXJGPzK6g 点击查看

名词解释

网格线：用与表示网格开始与结束的线。每条网格线都是从 1 开始，分为 行网格线 与 列网格线。

页面代码

html 复制代码

<div class="grid-container">
	<div class="grid-item item1">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
	<div class="grid-item">5</div>
	<div class="grid-item">6</div>
</div>

css 复制代码

.grid-container {
	width: 800px;
	padding: 1px;
	display: inline-grid;
	background-color: red;
	grid-template-rows: repeat(3, 100px);
	grid-template-columns: repeat(2, 1fr);
}

.grid-item {
	background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
	font-size: 30px;
	text-align: center;
	line-height: 100px;
	border: 1px solid red;
}

.item1 {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 2;
	grid-column-end: 3;
}

关键代码

css 复制代码

.item1 {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 2;
	grid-column-end: 3;
}

代码解释

grid-row-start: 2;grid-row-end: 3;grid-column-start: 2;grid-column-end: 3; 表示 .item1 定位到横向网格线2与3，与纵向网格线2与3之间的项目格项目；

布局展示

温馨提示

更多博文，请关注：xssy5431 小拾岁月