| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[58],{111:function(v,_,i){},265:function(v,_,i){"use strict";var d=i(111);i.n(d).a},349:function(v,_,i){"use strict";i.r(_);i(265);var d=i(0),n=Object(d.a)({},(function(){var v=this.$createElement;this._self._c;return this._m(0)}),[function(){var v=this,_=v.$createElement,i=v._self._c||_;return i("div",{staticClass:"box"},[i("h2",[v._v("Grid")]),v._v(" "),i("div",{staticStyle:{"margin-top":"50px","padding-left":"15px","text-align":"right"}},[i("a",{staticStyle:{"text-decoration":"none"},attrs:{href:"http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html",target:"_blank"}},[v._v("Grid 布局教程 by ")])]),v._v(" "),i("div",[i("pre",[v._v(".container.one{\n grid-template-columns:100px 100px 100px;\n grid-template-rows: 100px 100px 100px;\n}\n")])]),v._v(" "),i("div",{staticClass:"container one"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.two{\n grid-template-columns: 33.33% 33.33% 33.33%;\n grid-template-rows: 33.33% 33.33% 33.33%;\n }\n ")])]),v._v(" "),i("div",{staticClass:"container two"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.three{\n grid-template-columns: repeat(3,33.33%);\n grid-template-rows: repeat(3,33.33%);\n }\n")])]),v._v(" "),i("div",{staticClass:"container three"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.four{\n grid-template-columns: repeat(auto-fill,100px);\n }\n")])]),v._v(" "),i("div",{staticClass:"container four"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.five{\n grid-template-columns: 1fr 1fr 1fr;\n }\n ")])]),v._v(" "),i("div",{staticClass:"container five"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.six{\n grid-template-columns: 150px 1fr 2fr;\n }\n")])]),v._v(" "),i("div",{staticClass:"container six"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.seven{\n grid-template-columns: 1fr 1fr minmax(100px, 1fr);\n }\n")])]),v._v(" "),i("div",{staticClass:"container seven"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.eight{\n grid-template-columns: 100px auto 100px;\n }\n")])]),v._v(" "),i("div",{staticClass:"container eight"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" /* 指定每根线的名字，每根线的名字可以是多个的 */\n .container.nine{\n grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];\n grid-template-areas: [r1] 100px [r2] 100px [r3] auto [r4];\n }\n")])]),v._v(" "),i("div",{staticClass:"container nine"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container.ten-1{\n grid-template-columns: 70% 30%;\n }\n .container.ten-2{\n grid-template-columns: repeat(12,1fr);\n}\n")])]),v._v(" "),i("div",{staticClass:"container ten-1"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])]),v._v(" "),i("div",[i("p",[v._v("10")])])]),v._v(" "),i("div",{staticClass:"container ten-2"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])]),v._v(" "),i("div",[i("p",[v._v("10")])]),v._v(" "),i("div",[i("p",[v._v("11")])]),v._v(" "),i("div",[i("p",[v._v("12")])])]),v._v(" "),i("div",[i("pre",[v._v(" /* 设置间距 */\n grid-row-gap:20px;\n grid-column-gap: 20px;\n /* 简写 */\n grid-gap:<grid-row-gap> <grid-column-gap>;\n /* 最新标准 */\n grid-row-gap => row-gap\n grid-column-gap => column-gap\n grid-gap => gap\n ")])]),v._v(" "),i("div",{staticClass:"container eleven"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" grid-template-areas属性用于定义区域。\n grid-template-areas: 'a . c'\n 'd . f'\n 'g . i';\n /* 先列后行 */\n grid-auto-flow: column;\n /* 先行后列 */\n grid-auto-flow: row;/* 默认值 */\n ")])]),v._v(" "),i("div",{staticClass:"container twelve twelve-1"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" grid-column-start:1;\n grid-column-end:3;\n ")])]),v._v(" "),i("div",{staticClass:"container twelve style twelve-2"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" grid-auto-flow: row dense;\n ")])]),v._v(" "),i("div",{staticClass:"container twelve style twelve-3"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" grid-auto-flow: column dense;\n ")])]),v._v(" "),i("div",{staticClass:"container twelve style twelve-4"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" .container {\n justify-items: start | end | center | stretch;\n align-items: start | end | center | stretch;\n }\n start：对齐单元格的起始边缘。\n end：对齐单元格的结束边缘。\n center：单元格内部居中。\n stretch：拉伸，占满单元格的整个宽度（默认值）。\n")])]),v._v(" "),i("div",{staticClass:"container thirteen"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" align-items: start;\n")])]),v._v(" "),i("div",{staticClass:"container thirteen-1"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" /* 简写 */\n place-items: <align-items> <justify-items>\n place-items: start end;\n")])]),v._v(" "),i("div",{staticClass:"container thirteen-2"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("div",[i("pre",[v._v(" justify-content属性是整个内容区域在容器里面的水平位置（左中右），\n align-content属性是整个内容区域的垂直位置（上中下）。\n .container {\n justify-content: start | end | center | stretch | space-around | space-between | space-evenly;\n align-content: start | end | center | stretch | space-around | space-between | space-evenly;\n }\n")])]),v._v(" "),i("pre",[v._v("start - 对齐容器的起始边框。\n ")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-1"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v(" end - 对齐容器的结束边框。")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-2"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v(" center - 容器内部居中。")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-3"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("stretch - 项目大小没有指定时，拉伸占据整个网格容器。")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-4"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-5"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-6"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-7"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v(" /* 简写 */\n place-content: <align-content> <justify-content>\n ")]),v._v(" "),i("div",{staticClass:"container fourteen fourteen-7"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v(" 3.8\n grid-auto-columns 属性，\n grid-auto-rows 属性\n ")]),v._v(" "),i("div",{staticClass:"container fifteen"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("3.9(不推荐使用下面这2个简写)\ngrid-template 属性\n grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式\ngrid 属性\n grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。\n ")]),v._v(" "),i("pre",[v._v("4.1\n grid-column-start 属性，\n 左边框所在的垂直网格线\n grid-column-end 属性，\n 右边框所在的垂直网格线\n grid-row-start 属性，\n 上边框所在的水平网格线\n grid-row-end 属性\n 下边框所在的水平网格线\n")]),v._v(" "),i("pre",[v._v("/*\n 这段代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。\n*/\n.item-1 {\n grid-column-start: 2;\n grid-column-end: 4;\n}\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-1"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/*\n 指定四个边框位置\n*/\n.item-1 {\n grid-column-start: 1;\n grid-column-end: 3;\n grid-row-start: 2;\n grid-row-end: 4;\n}\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-2"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/*\n 指定为网格线的名字\n*/\n.item-1 {\n grid-column-start: header-start;\n grid-column-end: header-end;\n}\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-3"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/*\n 使用 span 关键字，表示 '跨越' 即左右边框（上下边框）之间跨越多少个网格\n*/\n.item-1 {\n grid-column-start: span 2;\n}\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-4"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/*\n 属性简写：\n grid-column：grid-column-start / grid-column-end;\n grid-row：grid-row-start / grid-row-end;\n*/\n.item-1 {\n grid-column: / ;\n grid-row: / ;\n}\n例子：\n\n.item-1 {\n grid-column: 1 / 3;\n grid-row: 1 / 2;\n}\n/* 等同于 */\n.item-1 {\n grid-column-start: 1;\n grid-column-end: 3;\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n上面 item-1占据第一行，从第一根列线到第三根列线。\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-5"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/*\n 用span关键字\n*/\n.item-1 {\n grid-column: 1 / 3;\n grid-row: 1 / 3;\n}\n/* 等同于 */\n.item-1 {\n grid-column: 1 / span 2;\n grid-row: 1 / span 2;\n}\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-6"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/*\n.item-1 {\n grid-column: 2;\n grid-row: 2;\n}\n*/\n")]),v._v(" "),i("div",{staticClass:"container sixteen sixteen-7"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/* grid-area */\n")]),v._v(" "),i("p",[v._v("grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。")]),v._v(" "),i("pre",[v._v(".item {\n grid-area: <row-start> / <column-start> / <row-end> / <column-end>;\n}\n")]),v._v(" "),i("div",{staticClass:"container seventeen seventeen-1"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("/* 例子 */\n.item-1 {\n grid-area: 1 / 1 / 3 / 3;\n}\n")]),v._v(" "),i("div",{staticClass:"container seventeen seventeen-2"},[i("div",[i("p",[v._v("1")])]),v._v(" "),i("div",[i("p",[v._v("2")])]),v._v(" "),i("div",[i("p",[v._v("3")])]),v._v(" "),i("div",[i("p",[v._v("4")])]),v._v(" "),i("div",[i("p",[v._v("5")])]),v._v(" "),i("div",[i("p",[v._v("6")])]),v._v(" "),i("div",[i("p",[v._v("7")])]),v._v(" "),i("div",[i("p",[v._v("8")])]),v._v(" "),i("div",[i("p",[v._v("9")])])]),v._v(" "),i("pre",[v._v("4.4\njustify-self 属性，\n 设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。\nalign-self 属性，\n 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。\n\n start：对齐单元格的起始边缘。\n end：对齐单元格的结束边缘。\n center：单元格内部居中。\n stretch：拉伸，占满单元格的整个宽度（默认值）。\n\n .item {\n justify-self: start | end | center | stretch;\n align-self: start | end | center | stretch;\n }\n\n\nplace-self 属性\n 属性是align-self属性和justify-self属性的合并简写形式\n\n place-self: <align-self> <justify-self>;\n\n .item {\n place-self: center center;\n }\n")])])}],!1,null,null,null);_.default=n.exports}}]);
|
