Grid栅格布局
2023-03-21 13:16:51 28 举报AI智能生成
登录查看完整内容
Grid栅格布局
作者其他创作
大纲/内容
Grid布局是CSS3中一种新的布局方式
通过将容器划分为行和列的网格，来实现页面布局
可以实现自适应、响应式布局
display:grid;//定义容器为网格布局
grid-template-columns:100px100px100px;//定义列的宽度
grid-template-rows:100px100px100px;//定义行的高度
grid-template-areas:\"headerheaderheader\"\"mainmainsidebar\"\"footerfooterfooter\";//定义区域
容器属性
grid-column-start:1;//项目开始的列
grid-column-end:3;//项目结束的列
grid-row-start:1;//项目开始的行
grid-row-end:3;//项目结束的行
grid-column:1/3;//项目开始和结束的列
grid-row:1/3;//项目开始和结束的行
grid-area:header;//项目所在的区域
项目属性
justify-self:start;//水平对齐方式
align-self:end;//垂直对齐方式
子元素属性
display:grid;
grid-template-columns:100px100px100px;
grid-template-rows:100px100px100px;
grid-template-areas:\"headerheaderheader\"\"mainmainsidebar\"\"footerfooterfooter\";
.container{
}
grid-area:header;
.header{
grid-area:main;
.main{
grid-area:sidebar;
.sidebar{
grid-area:footer;
.footer{
实例
Grid栅格布局
0 条评论
回复 删除
下一页
