(4.4)--3.4Grid布局(上)Web前端攻城狮.pdf

《(4.4)--3.4Grid布局(上)Web前端攻城狮.pdf》由会员分享，可在线阅读，更多相关《(4.4)--3.4Grid布局(上)Web前端攻城狮.pdf（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.4Grid 布局（上）Grid 布局？Flex BoxGriddisplay:girddisplay:girddisplay:grid 使元素成个块级的 Grid 容器display:girddisplay:grid 使元素成个块级的 Grid 容器使 grid-template 相关属性将容器划分为格display:girddisplay:grid 使元素成个块级的 Grid 容器使 grid-template 相关属性将容器划分为格设置每个项占哪些/列划分格ABCDEgrid?template?columns:100px 100px 200px;grid?template?rows:1

2、00px 100pxgrid?template?columns:30%30%auto;grid?template?rows:100px autogrid?template?columns:100px 1fr 1fr;grid?template?rows:100px 1frhttps:/s.codepen.io/webzhao/debug/PxrYzQ/jVkpoynXWweAGrid line 格线Grid line 格线1234123Grid area 格区域Grid area 格区域1Grid area 格区域11Grid area 格区域131Grid area 格区域1313ABCDE

3、.a grid?row?start:1;grid?column?start:1;grid?row?end:3;grid?column?end:3;.a grid?area:1/1/3/3;.a grid?area:2/2/4/4;.b grid?area:1/1/3/3;https:/s.codepen.io/webzhao/debug/xQoywx/nqMwvGnww.preview display:grid;grid?template?rows:1fr 1fr 1fr;grid?template?columns:1fr 1fr 1fr;ABC.preview grid?template?c

4、olumns:left 100px center 1fr right;grid?template?rows:top 1fr middle 1fr bottom;.a grid?area:top/left/bottom/center;https:/s.codepen.io/webzhao/debug/bQPmzO/PNAvYGDB命名格线ABCD.preview display:grid;grid?template?columns:200px 1fr;grid?template?rows:50px 1fr 50px;grid?template?areas:header header aside main footer footer;.a grid?area:header;.d grid?area:footer;https:/s.codepen.io/webzhao/debug/wQLROq/dGkXWdDnj命名格区域