CSS Grid 布局

最新推荐文章于 2024-05-14 01:46:08 发布

一个水瓶座程序猿.

最新推荐文章于 2024-05-14 01:46:08 发布

阅读量3k

点赞数 1

分类专栏： CSS CSS 专栏文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_60353088/article/details/126052799

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS 专栏

2 篇文章 0 订阅

订阅专栏

什么是 Grid 布局？

CSS Grid 布局是 二维布局方式，可以同时控制 行和列的排布和对齐方式
Grid 由水平线和垂直线构成，两条水平线中间的区域叫做 行轨道，两条垂直线中间的区域叫做 列轨道

如何开启 Grid 布局？

要想开启 Grid 布局，只需要在 外层父盒子容器 上设置：

display:grid;

如何改变 Grid 布局？

比如说，一个容器中有 6 个子元素。需求是把它改成 3 列布局，那么这个时候我们可以使用 grid-template-columns 属性，指定每列的宽度，可以是固定宽度

grid-template-columns:100px 100px 100px;

我们也可以使用 fr 来设置宽度：
fr 是 grid 布局专用的单位，代表的是 grid 剩余空间，这里三列各占三分之一

grid-template-columns:1fr 1fr 1fr;

如果把第二列改成 2fr，那么中间这列就会占据二分之一的空间

grid-template-columns:1fr 2fr 1fr;

如何设置 gap (行列间距) ？

我们通常要给 行和列来设置间距，那么我们可以通过 column-gap(列间距) 和 row-gap(行间距) 属性来设置

.grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	<!-- 列间距 -->
	column-gap:12px;
	<!-- 行间距 -->
	row-gap:12px;
}

注意：我们也可以通过一个属性 gap 来通过统一设置 行和列的间距

.grid {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	<!-- 行和列的间距都生效 -->
	gap:12px;
}

如何设置排列元素？

排列元素我们可以使用 grid-template-areas 属性。比如说我们有一个页面，它的头部和底部是宽度占满，侧边占 1 / 3，内容占 2 / 3，那么我们可以指定这样的区域：

<div class="container">
	<header>头部</header>
	<aside>侧边栏</aside>
	<main>内容</main>
	<footer>底部</footer>
</div>

<style>
	.container {
		display:grid;
		<!-- 设置元素排列 -->
		grid-template-areas:
			"header header header"
			"sidebar content content"
			"footer footer footer";
	}
	<!-- 各个元素指定对应的区域 -->
	header => grid-area:header
	aside => grid-area:sidebar
	main => grid-area:content
	footer => grid-area:footer
</style>