网格布局

欢迎关注：xssy5431 小拾岁月

网格布局之初步入门_当前页

网格容器

display: grid 与 display: inline-grid 创建一个网格容器，容器下的所有子元素成为网格项目。

  • display: grid 功能：网格项目按行排列，网格项目占用整个容器的宽度；
  • display: inline-grid 功能：网格项目按行排列，网格项目由自身宽度决定；

网格布局

代码

<div class="grid-container" id="grid-box">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>
.grid-container {
	width: 800px;
	padding: 10px;
	display: inline-grid;
	background-color: aliceblue;
	border: 1px solid white;
	border-radius: 6px;
	grid-template-columns: 1fr 1fr 2fr 2fr; 
	grid-row-gap: 20px;
	grid-column-gap: 20px;
}

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

关键代码

grid-template-columns: 1fr 1fr 2fr 2fr; 
grid-row-gap: 20px;
grid-column-gap: 20px;

布局展示

网格布局之初步入门_当前页_02

代码解释

  • grid-template-columns 表示网格项目的占比。当前页面中有 6 个网格项目，但仅仅说明 4 个项目的占比，所有默认最后 2 个元素换行，重新按照上述占比展示宽度。其中，单位 fr 用于表示宽度配额，表示按配额比例分配可用空间，且可以与其他单位混用，如：grid-template-columns: 3rem 25% 1fr 2fr;
  • grid-row-gap 表示行间隙
  • grid-column-gap 表示列间隙

温馨提示

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

网格布局之初步入门_当前页