1、flex布局与grid布局的区别
2、grid容器属性
3、justify-items、align-items与justify-content、align-content`的区别：
- 一个是grid项目在单元格中的对齐方式，一个是单元格在整个grid容器中的对齐方式（content包含items）
4、grid元素属性
5、实例（利用grid实现网页布局）
- 5.1、效果：
- 5.2、源代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0px; margin: 0px; } body, html { height: 100%; } .container { width: 100%; height: 100%; display: grid; grid-template-columns: 80% 20%; grid-template-rows: 15% 25% 25% 25% 10%; } .item { border: 1px solid black; } .header, .footer { grid-column: 1/3; } .aside { grid-row: 2/5; grid-column: 2/3; } </style> </head> <body> <div class="container"> <div class="item header">header</div> <div class="item docs">docs</div> <div class="item blogs">blogs</div> <div class="item vedios">vedios</div> <div class="item aside">aside</div> <div class="item footer">footer</div> </div> </body> </html>
6、笔记（源代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 容器属性 */ .container { width: 500px; height: 500px; border: 1px solid black; /* 1、grid属性:二维布局*/ display: grid; /* 2、grid-template-rows属性: 二维布局中的行。fr:按比例设置行*/ grid-template-rows: 100px 100px 100px; grid-template-rows: 1fr 1fr 2fr; /* 3、grid-template-columns属性: 二维布局中的列。fr:按比例设置列*/ grid-template-columns: 100px 100px 100px; grid-template-columns: 1fr 1fr 2fr; /* 4、grid-auto-flow属性:设置元素横/纵向排列(默认为横向) */ grid-auto-flow: column; /* 5、justify-items属性:设置元素水平方向排列方式(默认为延伸) 5.1、self-start属性值:元素在最左边，不延伸 5.2、self-end属性值:元素在最右边，不延伸 5.3、center属性值:元素在中边，不延伸 5.4、stretchr属性值:元素延伸,填满容器（默认） */ justify-items: stretch; /* 6、align-items属性:设置元素垂直方向排列方式(默认为延伸)，跟横向是一样的 */ align-items: stretch; /* 7、justify-content属性：设置整个grid容器水平方向排列方式(默认为延伸) */ justify-content: center; /* 8、align-content属性:设置整个grid容器垂直方向排列方式(默认为延伸)，跟横向是一样的 */ align-content: center; /* 9、justify-items、align-items与justify-content、align-content的区别： 一个是grid项目在单元格中的对齐方式，一个是单元格在整个grid容器中的对齐方式 */ /* 10、grid-auto-rows属性：设置行溢出的尺寸 */ grid-auto-rows: 50px; /* 11、grid-auto-columns属性：设置列溢出的尺寸 */ grid-auto-columns: 50px; } /* 项目属性 */ .item { border: 1px solid black; } .first { /* 12、grid-column属性：合并单元格（横向） grid-column-start属性：第一条单元格线的位置（横向） grid-column-end属性：最后一条单元格线的位置（横向） */ grid-column-start: 1; grid-column-end: 4; grid-column: 1/4; /* 13、grid-row属性：合并单元格（纵向） grid-row-start属性：第一条单元格线的位置（纵向） grid-row-end属性：最后一条单元格线的位置（纵向） */ grid-row-start: 1; grid-row-end: 4; grid-row: 1/4; /* 14、justify-self、align-self属性：设置个别元素在项目中水平垂直对齐（默认为拉伸） */ justify-self: stretch; align-self: stretch; } </style> </head> <body> <div class="container"> <div class="item first">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> <div class="item">item7</div> <div class="item">item8</div> <div class="item">item9</div> <div class="item">item10</div> </div> </body> </html>
