学习任务

用网格布局制作如图所示的网页

学习目标

1.理解 CSS 网格布局的核心概念与二维布局思维

2.熟练掌握网格容器与网格项目的核心属性及语法规则

3.掌握基于网格布局的响应式网页设计方法

点击观看视频

网格布局

display:grid;

示例1

<style>

.container{

    display:grid;

    grid-template-columns:1fr 1fr 1fr 1fr;   /* 4等分列 */

    grid-template-rows:200px 200px;      /* 2行，指定高度 */

    gap:20px;                           /* 网格间距 */

}

</style>

示例2

.container {

display: grid;

grid-template-columns: 300px 1fr ;

grid-template-rows: 80px calc(100vh - 180px) 100px;

grid-template-areas:

"header header"

"sidebar content"

"footer footer";

}

示例3

.ai-list {

grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

}

.ai-list li:first-child {

grid-column: 1 / 3;

}