【前端进阶学习】CSS怎么调整单元格（cell）内对齐方式在 CSS 网格中，每个网格项的内容分别位于被称为单元格（ce

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。可以通过调整一系列-self属性，调整单元格内对齐方式～

justify-self属性：设置其内容的位置在单元格内沿水平轴的对齐方式（水平对齐）
align-self属性：设置其内容的位置在单元格内沿垂直轴的对齐方式（垂直对齐）
justify-items&align-items属性：设置的是所有的列或行的对齐方式

常用对齐方法

start：使内容在单元格左侧（顶部）对齐
center：使内容在单元格居中对齐
end：使内容在单元格右侧（底部）对齐

<style type="text/css">
			.d1{background:Blue;}
			.d2{background:Red;}
			.d3{
				background:Gray;
				justify-self: end;//右侧（底部）对齐
			}
			.d4{
				background:Pink;
				justify-self: start;//左侧（顶部）对齐
			}
			.d5{
				background:Green;
			    grid-column: 1 / 4;
				grid-row: 3 / 4;
				justify-self: center;//居中对齐
			   }
			.container {
				font-size: 40px;
				width: 100%;
				background: LightGray;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;
				grid-gap: 10px;
			}
	</style>
	</head>
	<body>
		<div class="container">
		  <div class="d1">1</div>
		  <div class="d2">2</div>
		  <div class="d3">3</div>
		  <div class="d4">4</div>
		  <div class="d5">5</div>
		</div>
	</body>

写在最后

重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～（学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢这些大佬出题和解答：