大理建设招标有限公司网站,快团团小程序官网,营销网站设计上海天气,中国代理网官网grid网格布局#xff0c;是一个二维系统#xff0c;可以像表格一样将页面容器分割成一块一块的区域#xff0c;定义子元素的排布和位置。
简单使用#xff1a; 对父元素设置dispay#xff1a;grid;grid-template-colums和grid-template-rows来设置几行几列
1. grid-temp…grid网格布局是一个二维系统可以像表格一样将页面容器分割成一块一块的区域定义子元素的排布和位置。
简单使用 对父元素设置dispaygrid;grid-template-colums和grid-template-rows来设置几行几列
1. grid-template-columns/grid-template-rows属性
使用以空格分隔来定义网格的行和列它们之间的空格表示网格线
.container{display:grid;grid-template-columns: 50px auto 50px ;grid-template-rows: 25% 100px auto;
}上面代码设置的是一个三行三列的网格具体行高和列宽即为设置的值
2 fr属性
fr单元等分网格容器剩余可用空间来设置网络的大小 .container{grid-complate-columns: 1fr 1fr 1fr;
}上面代码将每个网格项设置为网格容器宽度的三分之一
3 grid-template-areas属性
grid-area属性可以定义网络模板通过引用grid-area属性指定的网格区域的名称来定义网络模板重复网格区域的名称会使内容扩展到这些单元格。
grid-area-name由网格项grid-area指定网格区域的名称
.代表空网格单元
none不定义网格区域
.area-a{grid-area: head;
}
.area-b{grid-area: body;
}
.area-c {grid-area: sidebar;
}
.area-d {grid-area: foot;
}
.container{grid-template-columns: 50px 50px 50px 50px;grid-template-rows: auto;grid-template-areas:head head head headbody body . sidebarfoot foot foot foot;
}上面代码创建如下网格 | head | head | head | head | | body | empty----grid | side | | foot | foot | foot | foot | 4 grid-template属性
grid-template-columns、grid-template-rows、grid-template-areas的简写
与flex区别 flex是一维布局适合做局部布局比如导航栏组件。grid是二维布局通常用于整个页面的规划。grid适合框架布局flex适合细节布局
