grid布局

最新推荐文章于 2025-04-01 00:16:11 发布

小阿涛

最新推荐文章于 2025-04-01 00:16:11 发布

阅读量678

点赞数

分类专栏： grid

本文链接：https://blog.youkuaiyun.com/weixin_41342195/article/details/81838243

版权

grid 专栏收录该内容

1 篇文章

订阅专栏

CSS Grid布局提供了一种二维网格系统，用于页面布局和用户界面设计。它可以创建固定轨道大小的网格，控制内容对齐和重叠，以及自适应添加额外轨道。网格由行和列定义，使用fr单位分配空间。通过minmax属性，可以定义网格项的最大最小内容贡献。此外，使用gap属性可以设置单元格间距。了解并实践这些概念，能够帮助开发者构建更复杂的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前景

CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。本文介绍了CSS网格布局和作为CSS网格布局级别1规范一部分的新术语。

什么是网格？

网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，尊重这些列和行。CSS网格布局具有以下功能：

固定轨道大小的网格

您可以创建具有固定轨道大小的网格 - 例如使用像素。这会将网格设置为适合您所需布局的指定像素。您还可以使用具有百分比的灵活尺寸或fr为此目的设计的新单元创建网格。

物品放置

您可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置。网格还包含一种算法，用于控制未在网格上显示位置的项目的放置。

创建附加曲目以保存内容

您可以使用网格布局定义显式网格，但规范还会处理在声明的网格之外添加的内容，这会在需要时添加其他行和列。包括添加“适合容器的多列”等功能。

对齐控制

网格包含对齐功能，以便我们可以控制项目放置到网格区域后的对齐方式，以及整个网格的对齐方式。

控制重叠内容

可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用z-index属性控制该分层。

Grid是一个功能强大的规范，当与CSS的其他部分（如flexbox）结合使用时，可以帮助您创建以前无法在CSS中构建的布局。这一切都始于在网格容器中创建网格。

Grid容器

控制块级display: grid; 控制行内display: inline-grid

grid ：生成一个块级网格
inline-grid ：生成一个内联网格
subgrid ：如果你的网格容器本身是另一个网格的网格项（即嵌套网格），你可以使用这个属性来表示

        html,body{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 100%;
			height: 100%;
			display: grid;
 			border-radius: 5px;
  			background-color: #fff4e6;
		}
		.box,div{
			font-size: 30px;
			border: 2px solid #ffa94d; 
			border-radius: 5px;
    		background-color: #ffd8a8;
    		padding: 1em;
    		color: #d9480f;
		}

<div class="box">
		<div>One</div>
		<div>Two</div>
		<div>Three</div>
  		<div>Four</div>
  		<div>Five</div>
</div>

网格轨道

我们使用grid-template-columns和grid-template-rows属性在网格上定义行和列。这些定义了网格轨道。网格轨道是在网格上的任何两行之间的空间。在下图中，您可以看到突出显示的轨道 - 这是我们网格中的第一个行轨道。

grid-template-columns：将行网格分成几份，每份多大;

grid-template-rows：将列网格分成几份，每份多大;

grid-template-columns和grid-template-rows的参数repeat()，重复轨道列表的相同大小或每个大小不一；

<div class="box">
		<div>One</div>
		<div>Two</div>
		<div>Three</div>
  		<div>Four</div>
  		<div>Five</div>
</div>

        html,body{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 100%;
			height: 100%;
			display: grid;
            grid-template-columns: 200px;
 			border-radius: 5px;
  			background-color: #fff4e6;
		}
		.box,div{
			font-size: 30px;
			border: 2px solid #ffa94d; 
			border-radius: 5px;
    		background-color: #ffd8a8;
    		padding: 1em;
    		color: #d9480f;
		}

        html,body{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 100%;
			height: 100%;
			display: grid;
            grid-template-columns: 200px 200px 200px;
 			border-radius: 5px;
  			background-color: #fff4e6;
		}
		.box,div{
			font-size: 30px;
			border: 2px solid #ffa94d; 
			border-radius: 5px;
    		background-color: #ffd8a8;
    		padding: 1em;
    		color: #d9480f;
		}

grid-template-columns: 200px 200px 200px;分成了3份每份200px 相同于grid-template-columns: repeat(3,200px);

        html,body{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 100%;
			height: 100%;
			display: grid;
            grid-template-columns: repeat(3,200px);
			grid-template-rows: repeat(2,100px);
 			border-radius: 5px;
  			background-color: #fff4e6;
		}
		.box,div{
			font-size: 30px;
			border: 2px solid #ffa94d; 
			border-radius: 5px;
    		background-color: #ffd8a8;
    		padding: 1em;
    		color: #d9480f;
		}

grid-template-rows: repeat(2,100px);是将每列分成2份，每份100px 效果如图：

fr单位

fr单元表示网格容器中可用空间的一小部分。下一个网格定义将创建三个相等宽度的轨道，根据可用空间增长和缩小。

通俗的讲像1fr x 3个div = （flex：1； x 3个div）是在但当前盒子整分成三份

用fr单位写如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html,body{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-rows: 200px 1fr 300px;
 			border-radius: 5px;
  			background-color: #fff4e6;
		}
		.box,div{
			font-size: 30px;
			border: 2px solid #ffa94d; 
			border-radius: 5px;
    		background-color: #ffd8a8;
    		padding: 1em;
    		color: #d9480f;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>header</div>
		<div>body</div>
		<div>footer</div>
	</div>
</body>
</html>

用flex怎么写如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html,body{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
 			border-radius: 5px;
  			background-color: #fff4e6;
		}
		.header{
			width: 100%;
			height: 10rem;
		}
		.body{
			flex: 1;
		}
		.footer{
			width: 100%;
			height: 10rem;
		}
		.box,div{
			font-size: 30px;
			border: 2px solid #ffa94d; 
			border-radius: 5px;
    		background-color: #ffd8a8;
    		padding: 1em;
    		color: #d9480f;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="header">header</div>
		<div class="body">body</div>
		<div class="footer">footer</div>
	</div>
</body>
</html>

flex: 1; == 1fr

在这个网址中操作一番试验一下，体验一番 https://codepen.io/pen/

minmax属性

minmax(最小，最大)

max-content

表示占据网格轨道的网格项的最大最大内容贡献。

min-content

表示占据网格轨道的网格项的最大最小内容贡献。

minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

使用grid-column-start，grid-column-end，grid-row-start和grid-row-end属性。从左到右工作，第一个项目放在第1行的第1行，并跨越到第4行，在我们的例子中是第4行，它是网格上的最右边的行。它从第1行开始，到第3行结束，因此跨越两个行轨道。

grid-column-start，grid-column-end 水平合并合并开始位置start，水平合并合并开始位置end

grid-row-start，grid-row-end 垂直合并合并开始位置start，垂直合并合并开始位置end

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

/* .box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
} */
* {box-sizing: border-box;}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
	</style>
</head>
<body>
	<div class="wrapper">
      <div class="box1">One</div>
      <div class="box2">Two</div>
      <div class="box3">Three</div>
      <div class="box4">Four</div>
      <div class="box5">Five</div>
    </div>
</body>
</html>

合并前如图：