

首页  思维导图  详情



Grid栅格布局

2023-03-21 13:16:51   29  举报





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;

}

 Collect

Get Started

时间轴模板 | 首次模板挑战

 Collect

Get Started

招聘计划甘特图|首次模板挑战

 Collect

Get Started

Grid Construction

 Collect

Get Started

时间轴|首次模板挑战





0 条评论

下一页