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;//垂直对齐方式
实例
.container{
display:grid;
grid-template-columns:100px100px100px;
grid-template-rows:100px100px100px;
grid-template-areas:"headerheaderheader""mainmainsidebar""footerfooterfooter";
}
.header{
grid-area:header;
}
.main{
grid-area:main;
}
.sidebar{
grid-area:sidebar;
}
.footer{
grid-area:footer;
}
0 条评论
下一页
