grid 两分钟入门网格布局

昌周

已于 2023-06-21 15:34:59 修改

阅读量140

点赞数

文章标签：前端 javascript python

于 2023-06-19 10:17:54 首次发布

本文链接：https://blog.csdn.net/qq_45623378/article/details/131281184

版权

该文章介绍了如何使用CSS的grid布局来创建和管理网页布局。主要涉及grid-template-columns和grid-template-rows属性用于定义行和列轨道，display:grid用于开启网格布局，fr单位和repeat函数简化布局设置，以及grid-gap用于设置网格间隔。文章还展示了如何通过grid-area和grid-template-areas进行组件分布和单元格合并。

摘要由CSDN通过智能技术生成

全部都围绕着下面两个进行开发其他的属性都是优化辅助

行轨道 grid-template-columns

列轨道 grid-template-rows

如何开启网格布局

在父级进行 display: grid

单位fr = flex:1

快速布局

行轨道 grid-template-columns 管理x轴将x平均分布为多少个网格

grid-template-columns：100px 100px 此时将x 轴平均分为 2个100px 的网格

grid-template-rows：100px 100px 此时将y 轴平均分为 2个100px 的网格

如果有重复性的东西 reapt(3,300px)

grid-template-columns：reapt(3,300px) 100px 创建3个300px 一个 100px 的容器

设置间隔

grid-gap：100px 100px

将组件分布以后

进行辅助处理

在被分割组件内使用

grid-template-columns：1/3 此时将x 轴平均分为从x轴进行计算从第一个网格进行计算合并到第三个网格

grid-template-rows：1/3 此时将y轴平均分为从y轴进行计算从第一个网格进行计算合并到第三个网格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		 .boxmain{
			 height: 10vh;
          display: grid;
		  grid-gap: 10px;
		 
		  grid-template-areas: 'item1 item2 item2 item3 item4 item4'
		  
		 }
		 .boxmain  div{
			 background: red;
			 line-height: 100%;
			 display: grid;
			 align-items: center;
			 width: 100%;
			 text-align: center;
		 }
		 .item1 {
			 grid-area: item1;
		 }
		 .item2 {
		 			 grid-area: item2;
		 }
		 .item3 {
		 			 grid-area: item3;
		 }
		 .item4 {   display: grid;
		 			 grid-area: item4;
					 grid-template-rows: repeat(3,1fr);
					 grid-template-columns: repeat(6,1fr);
					 grid-gap: 10px;
		 }
		 .item4 div{
			 background: greenyellow;
			 height: 100%;
			 width: 100%;
			 
		 }
		 .value1 {
			   grid-column: span 5;
			   grid-row: span 3;
			   /* grid-area: ''1/6  1/4; */
			   
		 }
	</style>
	<body>
		<div class="boxmain">
			  <div class="item1">1</div>
			  <div class="item2">2</div>
			  <div class="item3">3</div>
			  <div class="item4">
				       <div class="value1">1</div>
					   <div class="value2">2</div>
					   <div class="value3">3</div>
					   <div class="value4">4</div>
			  </div>
		</div>
	</body>
</html>