{"componentChunkName":"component---src-templates-blog-post-js","path":"/powerful-grid-layout-scheme/","result":{"data":{"markdownRemark":{"html":"<h2>概述</h2>\n<p>grid网格布局擅长将页面分为不同区域(网格)，控制各部分之间在大小，位置和层的不同方面的联系，可以做出各种各样的布局。</p>\n<h2>Grid布局与Flex布局 ？</h2>\n<blockquote>\n<p>Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定\"项目\"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成\"行\"和\"列\"，产生单元格，然后指定\"项目所在\"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。   -阮一峰老师博客</p>\n</blockquote>\n<p><strong>注意:设置网格布局后容器子元素的 float display:inline-block | table-cell vertical-align column将失效</strong></p>\n<ul>\n<li>display : grid | inline-grid</li>\n</ul>\n<p>默认容器为块级元素 可设置为行内元素</p>\n<ul>\n<li>grid-template-columns: 100px 100px 100px</li>\n</ul>\n<p>列宽</p>\n<ul>\n<li>grid-template-rows: 10% 10% 10%</li>\n</ul>\n<p>行高</p>\n<ul>\n<li>grid-template-areas  : \"a a a\"  \" b b b\"  \"c c c\"</li>\n</ul>\n<p>以上三个属性可简写为grid-template<br>\ngrid是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow的简写</p>\n<ul>\n<li>grid-template-columns: repeat(3,100px)</li>\n</ul>\n<p>repeat()函数可以简化重复的值,第一个参数是重复的次数,第二个参数为重复的值\n\b也可重复某种模式: repeat(3,100px 100px)</p>\n<ul>\n<li>auto-fill: grid-template-columns: repeat(auto-fill,100px)</li>\n</ul>\n<p>当单元格的大小是固定的,容器的大小不固定时,使用auto-fill关键字自动填充</p>\n<ul>\n<li>fr: grid-template-columns: 100px 2fr 1fr</li>\n</ul>\n<p>fraction的缩写,意为片段 , 2fr 1fr 表示前者是后者的二倍</p>\n<ul>\n<li>grid-template-columns: minmax(100px, 1fr)</li>\n</ul>\n<p>表示一个长度范围</p>\n<ul>\n<li>grid-template-columns: 100px auto 100px</li>\n</ul>\n<p>长度由浏览器决定</p>\n<ul>\n<li>网格线名称: grid-template-columns: [c1] 100px [fifth c2] 100px</li>\n</ul>\n<p>可以指定网格线名称,方便以后引用,一个网格线可以有多个名字</p>\n<ul>\n<li>grid-row-gap: 20px | grid-column-gap: 20px</li>\n</ul>\n<p>(根据新的标准改写为:row-gap column-gap gap)<br>\n单元格之间的空隙,可以合并为 grid-gap: 20px 20px</p>\n<ul>\n<li>grid-auto-flow: row | column</li>\n</ul>\n<p>单元格填充顺序 默认为row:先行后列, row dense尽量填满空格</p>\n<ul>\n<li>justify-items: start | end | center | stretch</li>\n</ul>\n<p>单元格内容的水平位置</p>\n<ul>\n<li>align-items: start | end | center | stretch</li>\n</ul>\n<p>单元格内容的垂直位置</p>\n<ul>\n<li>place-items: start end</li>\n</ul>\n<p>justify-items 和 align-items 的合并方式</p>\n<ul>\n<li>justify-content: start | end | center | stretch | space-around | space-between | space-evenly</li>\n</ul>\n<p>单元格内容区域在容器里的水平位置</p>\n<ul>\n<li>align-content: start | end | center | stretch | space-around | space-between | space-evenly</li>\n</ul>\n<p>单元格内容区域在容器里的垂直位置</p>\n<ul>\n<li>place-content: start end</li>\n</ul>\n<p>justify-content 和 align-content 的合并方式</p>\n<ul>\n<li>grid-auto-rows | grid-auto-columns</li>\n</ul>\n<p>自动产生的单元格的大小</p>\n<ul>\n<li>grid-column-start:2 | grid-column-end | grid-row-start | grid-row-end</li>\n</ul>\n<p>项目的位置是可以指定的(也可指定网格线的名字)</p>\n<ul>\n<li>grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式</li>\n<li>grid-area：<br>\n指定项目放在哪一个区域</li>\n<li>grid-area属性还可用作grid-row-start、         grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置</li>\n<li>justify-self | align-self | place-self<br>\n单个项目的位置</li>\n</ul>","timeToRead":3,"frontmatter":{"title":"强大的grid网格布局方案","date":"January 04, 2020","spoiler":null},"fields":{"slug":"/powerful-grid-layout-scheme/"}}},"pageContext":{"slug":"/powerful-grid-layout-scheme/","previous":{"fields":{"slug":"/learn-about-the-js-memory-mechanism/"},"frontmatter":{"title":"了解js内存机制"}},"next":{"fields":{"slug":"/z-index-attribute-of-css/"},"frontmatter":{"title":"理解css的z-index属性(层叠上下文)"}}}},"staticQueryHashes":["3649515864","63159454"]}