叶寻的博客

CSS Grid 布局教程

CSS Grid 是二维布局方法，也就是用竖线和横线将内容划分成格子，像棋盘一样。本文只介绍常见用法，要了解全部用法请看 <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>。推荐大家看完后做文末提到的习题。 <h2 class="heading" id="概念"> 概念 <a href="#%e6%a6%82%e5%bf%b5">#</a> </h2><h3 class="heading" id="网格容器grid-container网格项grid-item"> 网格容器（Grid Container）、网格项（Grid Item） <a href="#%e7%bd%91%e6%a0%bc%e5%ae%b9%e5%99%a8grid-container%e7%bd%91%e6%a0%bc%e9%a1%b9grid-item">#</a> </h3><code>display: grid | inline-grid</code> 使元素变成网格容器，其子元素叫网格项（其他后代不算），按照网格布局排列。下面代码的 <code>.container</code> 是网格容器，<code>.item</code> 是网格项，<code>.sub-item</code> 不是网格项。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: grid; } </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="container"> <div class="item"></div> <div class="item"> <p class="sub-item"></p> </div> <div class="item"></div> </div> </code></pre></td></tr></table> </div> </div><h3 class="heading" id="网格线grid-line"> 网格线（Grid Line） <a href="#%e7%bd%91%e6%a0%bc%e7%ba%bfgrid-line">#</a> </h3>划分网格的竖线（vertical line）或横线（horizontal line）。横线方向和书写方向一致（英文是从左到右），竖线方向是从上到下。同一条网格线可以有多个名称。 <figure> <img src="https://www.w3.org/TR/css-grid-1/images/grid-lines.png"><figcaption>虚线是网格线</figcaption></figure><h3 class="heading" id="网格单元grid-cell"> 网格单元（Grid Cell） <a href="#%e7%bd%91%e6%a0%bc%e5%8d%95%e5%85%83grid-cell">#</a> </h3>网格布局的最小单位，就像电子表格的单元格和棋盘的格子，相邻的 2 个竖线之间和相邻的 2 条横线之间的区域。1 个网格项可以使用多个网格单元。 <h3 class="heading" id="网格轨道grid-track"> 网格轨道（Grid Track） <a href="#%e7%bd%91%e6%a0%bc%e8%bd%a8%e9%81%93grid-track">#</a> </h3>2 条相邻网格线之间的区域，也就是 1 个横排（row）或者 1 个竖排（column）。 <h3 class="heading" id="网格区域grid-area"> 网格区域（Grid Area） <a href="#%e7%bd%91%e6%a0%bc%e5%8c%ba%e5%9f%9fgrid-area">#</a> </h3>由 4 条网格线划分的区域，也就是长方形，比如 1 个网格单位、4 个网格单位、6 个网格单位。 示例（A 表示网格区域）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">A??? ???? </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">AA?? AA?? </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">AAA? AAA? </code></pre></td></tr></table> </div> </div><h3 class="heading" id="显性网格explicit-grid隐性网格implicit-grid"> 显性网格（Explicit Grid）、隐性网格（Implicit Grid） <a href="#%e6%98%be%e6%80%a7%e7%bd%91%e6%a0%bcexplicit-grid%e9%9a%90%e6%80%a7%e7%bd%91%e6%a0%bcimplicit-grid">#</a> </h3>显性网格有固定数量的网格轨道，比如 3×3。如果此时加入额外的网格项，网格将自动添加 auto 尺寸的隐性网格轨道，原来的显性网格轨道加上自动添加的隐性网格轨道就是隐性轨道。只定义竖网格线也可以产生隐性网格。 <h3 class="heading" id="frfraction1-份可用空间"> fr（fraction）1 份可用空间 <a href="#frfraction1-%e4%bb%bd%e5%8f%af%e7%94%a8%e7%a9%ba%e9%97%b4">#</a> </h3><code>fr</code> 表示网格容器的 1 份可用空间。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: grid; /* 3 个竖排，比例为 1:2:1 */ grid-template-columns: 1fr 2fr 1fr; /* 3 个横排，第 1 横排为 30px，剩余横排比例为 1:1 */ grid-template-rows: 30px 1fr 1fr; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="minmax-最大最小值"> minmax() 最大最小值 <a href="#minmax-%e6%9c%80%e5%a4%a7%e6%9c%80%e5%b0%8f%e5%80%bc">#</a> </h3>参考资料：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/minmax">minmax() - CSS: Cascading Style Sheets | MDN</a> <code>minmax()</code> 函数设置最小值和最大值。下面代码表示第 1 横排的尺寸最小 50px，最大 <code>auto</code>（根据内容自动扩大）。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { grid-template-rows: minmax(50px, auto) 1fr 1fr; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="repeat-函数"> repeat() 函数 <a href="#repeat-%e5%87%bd%e6%95%b0">#</a> </h3>参考资料：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeat">repeat() - CSS: Cascading Style Sheets | MDN</a> <code>repeat()</code> 函数用于表示重复的网格轨道片段。 <a href="https://jsbin.com/kudapojoci/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { grid-template-rows: repeat(3, 1fr); /* 1fr 1fr 1fr */ } </code></pre></td></tr></table> </div> </div><a href="https://jsbin.com/jovuxukibo/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { grid-template-rows: 2fr repeat(2, 1fr); /* 2fr 1fr 1fr */ } </code></pre></td></tr></table> </div> </div>除了使用固定的数字，还可用 <code>auto-fit</code> 和 <code>auto-fill</code>。 <h2 class="heading" id="网格容器的属性"> 网格容器的属性 <a href="#%e7%bd%91%e6%a0%bc%e5%ae%b9%e5%99%a8%e7%9a%84%e5%b1%9e%e6%80%a7">#</a> </h2>网格容器可以使用以下属性。 <ul> <li>display</li> <li>grid-template-columns</li> <li>grid-template-rows</li> <li>grid-template-areas</li> <li>grid-template</li> <li>grid-column-gap</li> <li>grid-row-gap</li> <li>grid-gap</li> <li>justify-items</li> <li>align-items</li> <li>place-items</li> <li>justify-content</li> <li>align-content</li> <li>place-content</li> <li>grid-auto-columns</li> <li>grid-auto-rows</li> <li>grid-auto-flow</li> <li>grid</li> </ul> <h3 class="heading" id="display-设置容器"> display 设置容器 <a href="#display-%e8%ae%be%e7%bd%ae%e5%ae%b9%e5%99%a8">#</a> </h3>对元素使用，使其变成网格容器。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: grid | inline-grid; } </code></pre></td></tr></table> </div> </div>值： <ul> <li>grid：生成 block 级网格容器</li> <li>inline-grid：生成 inline 级网格容器</li> </ul> <h3 class="heading" id="grid-template-columnsgrid-template-rows网格线名称与网格轨道"> grid-template-columns、grid-template-rows，网格线名称与网格轨道 <a href="#grid-template-columnsgrid-template-rows%e7%bd%91%e6%a0%bc%e7%ba%bf%e5%90%8d%e7%a7%b0%e4%b8%8e%e7%bd%91%e6%a0%bc%e8%bd%a8%e9%81%93">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-template-columnsgrid-template-rows">CSS Grid Layout Guide | CSS-Tricks#aa-grid-template-columnsgrid-template-rows</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows - CSS: Cascading Style Sheets | MDN</a></li> </ul> 示例（<a href="https://jsbin.com/kihehuxiso/6/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> <div class="item item7">7</div> <div class="item item8">8</div> <div class="item item9">9</div> </div> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { border: 1px solid red; height: 400px; display: grid; /* 3 个竖排，比例为 1:2:1 */ grid-template-columns: 1fr 2fr 1fr; /* 3 个横排，第 1 横排为 30px，剩余横排比例为 1:1 */ grid-template-rows: 30px 1fr 1fr; } </code></pre></td></tr></table> </div> </div>现在网格项排列成这样： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">1 2 3 4 5 6 7 8 9 </code></pre></td></tr></table> </div> </div>可以用 <code>[]</code> 定义网格线名称，用空格分隔多个名称。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { grid-template-columns: [column1-start] 1fr [column2-start] 2fr [column3-start] 1fr [column-end another-name]; } </code></pre></td></tr></table> </div> </div><code>grid-column-start</code> 和 <code>grid-row-start</code> 可以改变网格项的位置，<a href="https://jsbin.com/kexizufuwi/4/edit?html,css,output">在线示例</a>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: grid; grid-template-columns: [column1-start] 1fr [column2-start] 2fr [column3-start] 1fr [column-end]; grid-template-rows: 30px 1fr 1fr; } .item9 { grid-column-start: column2-start; grid-row-start: 2; /* 第 2 条横线 */ } </code></pre></td></tr></table> </div> </div>现在 <code>.item9</code> 占据了 <code>.item5</code> 的位置。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">1 2 3 4 9 5 6 7 8 </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-template-areas-网格区域名称"> grid-template-areas 网格区域名称 <a href="#grid-template-areas-%e7%bd%91%e6%a0%bc%e5%8c%ba%e5%9f%9f%e5%90%8d%e7%a7%b0">#</a> </h3>参考资料：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas - CSS: Cascading Style Sheets | MDN</a> <code>grid-template-areas</code> 以网格区域名称表示网格的结构。<code>grid-template-areas</code> 的优点是放置网格项时不需要用网格线（数网格线或者命名真的太痛苦了）。相同名称可以用多次，表示占用多个网格单元。英文句号 <code>.</code> 表示不使用此网格单元。<code>grid-area</code> 定义元素对应的网格区域名称。 <code>grid-template-areas</code> 会自动使用 <code>-start</code> 和 <code>-end</code> 命名网格线。<code>header</code> 网格区域的起始网格线（横线与竖线）都是 <code>header-start</code>，终止网格线（横线与竖线）都是 <code>header-end</code>。同一条网格线可以有多个名称。 示例（<a href="https://jsbin.com/xegagaviru/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="container"> <header>header</header> <aside>sidebar</aside> <main>main</main> <footer>footer</footer> </div> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">header,aside,main,footer { border: 1px solid green; } .container { border: 1px solid red; height: 400px; display: grid; grid-template-areas: "header header header header" "main main . aside" "footer footer footer footer"; grid-template-columns: 1fr 1fr 1fr 50px; grid-template-rows: auto; } header { grid-area: header; } aside { grid-area: aside; } main { grid-area: main; } footer { grid-area: footer; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-templategrid-template-rowsgrid-template-columnsgrid-template-areas-的缩写"> grid-template（grid-template-rows、grid-template-columns、grid-template-areas 的缩写） <a href="#grid-templategrid-template-rowsgrid-template-columnsgrid-template-areas-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-template">CSS Grid Layout Guide | CSS-Tricks#aa-grid-template</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template">grid-template - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>grid-template</code> 是 <code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code> 的缩写。<code>grid-template</code> 不会重置隐性网格属性。 只设置 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 的用法是用 <code>/</code> 隔开两者。 示例（<a href="https://jsbin.com/goxaroyela/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: grid; /* 横排比例 1:1:1，竖排比例 1:3:1 */ grid-template: 1fr 1fr 1fr / 1fr 3fr 1fr; /* 等价于 grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 3fr 1fr; */ } </code></pre></td></tr></table> </div> </div>同时设置 <code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code> 的用法： <ol> <li>先写 <code>grid-template-areas</code></li> <li>在每横排右边写上尺寸</li> <li>在最后的横排加上 <code>/</code> 和竖排的尺寸（<code>/</code> 从下一行开始写也行）</li> </ol> 示例（<a href="https://jsbin.com/biwemurohi/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { border: 1px solid red; height: 400px; display: grid; grid-template: "header header header" auto "main main aside " 1fr "footer footer footer" auto / auto auto 50px; /* 等价于 grid-template-areas: "header header header" "main main aside" "footer footer footer"; grid-template-columns: auto auto 50px; grid-template-rows: auto 1fr auto; */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="row-gapcolumn-gapgap-间隔"> row-gap、column-gap、gap 间隔 <a href="#row-gapcolumn-gapgap-%e9%97%b4%e9%9a%94">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-column-gaprow-gapgrid-column-gapgrid-row-gap">CSS Grid Layout Guide | CSS-Tricks#aa-column-gaprow-gapgrid-column-gapgrid-row-gap</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">gap - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>row-gap</code> 表示横排之间的间隔，<code>column-gap</code> 表示竖排之间的间隔。<code>gap</code> 是前面两者的缩写，使用 1 个值表示横排间隔和竖排间隔一样，使用 2 个值分别表示横排间隔是竖排间隔。 示例： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { row-gap: 30px; column-gap: 10px; gap: 10px; /* 竖排间隔和横排间隔都是 10px */ gap: 30px 10px; /* 横排间隔 30px，竖排间隔 10px */ } </code></pre></td></tr></table> </div> </div>以前这 3 个属性前面要加上 <code>grid-</code>，比如 <code>grid-row-gap</code>。带 <code>grid-</code> 前缀的属性已被弃用，浏览器为了保持兼容，仍然支持这些属性。 <h3 class="heading" id="justify-items网格项的-inline-轴横轴对齐"> justify-items，网格项的 inline 轴（横轴）对齐 <a href="#justify-items%e7%bd%91%e6%a0%bc%e9%a1%b9%e7%9a%84-inline-%e8%bd%b4%e6%a8%aa%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-justify-items">CSS Grid Layout Guide | CSS-Tricks#aa-justify-items</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items">justify-items - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>justify-items</code> 设置网格项 inline 轴（横轴）对齐方式，默认值为 <code>stretch</code>（占满网格单元宽度）。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { justify-items: start | end | center | stretch; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="align-items网格项的-block-轴竖轴对齐"> align-items，网格项的 block 轴（竖轴）对齐 <a href="#align-items%e7%bd%91%e6%a0%bc%e9%a1%b9%e7%9a%84-block-%e8%bd%b4%e7%ab%96%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-align-items">CSS Grid Layout Guide | CSS-Tricks#aa-align-items</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">align-items - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>align-items</code> 设置网格项 block 轴（竖轴）的对齐方式，默认值为 <code>stretch</code>（占满网格单元高度）。<code>baseline</code> 表示按<a href="https://zh.wikipedia.org/zh-cn/%E5%9F%BA%E7%B7%9A">基线</a>对齐。内容有多行时，<code>first baseline</code> 表示按照首行的基线对齐，<code>last baseline</code> 表示按照尾行的基线对齐。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { align-items: start | end | center | stretch | baseline | first baseline | last baseline; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="place-itemsalign-itemsjustify-items-的缩写"> place-items（align-items、justify-items 的缩写） <a href="#place-itemsalign-itemsjustify-items-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-place-items">CSS Grid Layout Guide | CSS-Tricks#aa-place-items</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-items">place-items - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>place-items</code> 是 <code>align-items</code>、<code>justify-items</code> 的缩写。使用 1 个值同时设置 2 个属性，使用 2 个值分别设置两个属性。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { place-items: center; /* 正中间 */ place-items: start end; /* 右上角 */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="justify-content网格项整体-inline-轴横轴对齐"> justify-content，网格项整体 inline 轴（横轴）对齐 <a href="#justify-content%e7%bd%91%e6%a0%bc%e9%a1%b9%e6%95%b4%e4%bd%93-inline-%e8%bd%b4%e6%a8%aa%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-justify-content">CSS Grid Layout Guide | CSS-Tricks#aa-justify-content</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">justify-content - CSS: Cascading Style Sheets | MDN</a></li> </ul> 如果网格项的总尺寸小于网格容器的尺寸，网格容器会有多于的空白，此时网格项被放置于左上角（使用<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">从左向右的语言</a>）。<code>justify-content</code> 设置 inline 轴（横轴）的对齐方式。Flex 布局也有 <code>justify-content</code>，用法类似，参看 <a href="https://cyrusyip.org/zh-cn/posts/2024/09/06/css-flexbox-layout-guide/#justify-content-%E4%B8%BB%E8%BD%B4%E5%AF%B9%E9%BD%90">CSS Flexbox 布局教程#justify-content-主轴对齐</a>（发布前看看这个链接对不对）。 <a href="https://jsbin.com/qideyedofa/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="align-content网格项整体的-block-轴竖轴对齐"> align-content，网格项整体的 block 轴（竖轴）对齐 <a href="#align-content%e7%bd%91%e6%a0%bc%e9%a1%b9%e6%95%b4%e4%bd%93%e7%9a%84-block-%e8%bd%b4%e7%ab%96%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-align-content">CSS Grid Layout Guide | CSS-Tricks#aa-align-content</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">align-content - CSS: Cascading Style Sheets | MDN</a></li> </ul> 如果网格项的总尺寸小于网格容器的尺寸，网格容器会有多于的空白，此时网格项被放置于左上角（使用<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">从左向右的语言</a>）。<code>align-content</code> 设置 block 轴（竖轴）的对齐方式。Flex 布局也有 <code>align-content</code>，用法类似。 <a href="https://jsbin.com/qecuwusabi/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { align-content: start | end | center | stretch | space-around | space-between | space-evenly; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="place-contentalign-contentjustify-content-的缩写"> place-content（align-content、justify-content 的缩写） <a href="#place-contentalign-contentjustify-content-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3>参考资料：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-content">place-content - CSS: Cascading Style Sheets | MDN</a> <code>place-content</code> 是 <code>align-content</code> 和 <code>justify-content</code> 的缩写。用 1 个值同时设置两者，用 2 个值分别设置两者。 示例（<a href="https://jsbin.com/numarihela/1/edit?html,css,output">在线示例</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { place-content: start end; /* align-content: start; justify-content: end; */ place-content: center; /* align-content: center; justify-content: center; */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-auto-columnsgrid-auto-rows-隐性网格轨道大小"> grid-auto-columns、grid-auto-rows 隐性网格轨道大小 <a href="#grid-auto-columnsgrid-auto-rows-%e9%9a%90%e6%80%a7%e7%bd%91%e6%a0%bc%e8%bd%a8%e9%81%93%e5%a4%a7%e5%b0%8f">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-auto-columnsgrid-auto-rows">CSS Grid Layout Guide | CSS-Tricks#aa-grid-auto-columnsgrid-auto-rows</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows - CSS: Cascading Style Sheets | MDN</a></li> </ul> 如果网格项数量多于已定义的网格项数量，那么多出了网格项就位于隐性网格轨道。<code>grid-auto-columns</code> 设置竖向隐性网格轨道大小，<code>grid-auto-rows</code> 设置横向隐性网格轨道大小，两者默认值都是 <code>auto</code>。 <a href="https://jsbin.com/sivaqodiyo/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { grid-auto-rows: 100px; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-auto-flow-自动放置算法"> grid-auto-flow 自动放置算法 <a href="#grid-auto-flow-%e8%87%aa%e5%8a%a8%e6%94%be%e7%bd%ae%e7%ae%97%e6%b3%95">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-auto-flow">CSS Grid Layout Guide | CSS-Tricks#aa-grid-auto-flow</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow - CSS: Cascading Style Sheets | MDN</a></li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { grid-auto-flow: row | column | row dense | column dense; } </code></pre></td></tr></table> </div> </div><code>grid-auto-flow</code> 设置网格项的放置算法。 <code>row</code>（默认值）：横向放置网格项，必要时添加新的横排。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">1 2 3 4 5 6 7 8 9 </code></pre></td></tr></table> </div> </div><code>column</code>：竖向放置网格项，必要时添加新的竖排，<a href="https://jsbin.com/gevalocuna/1/edit?html,css,output">在线示例</a>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">1 4 7 2 5 8 3 6 9 </code></pre></td></tr></table> </div> </div><code>dense</code> 关键词表示后面的元素可以移动到前面的空位，示例（<a href="https://jsbin.com/tixesiyema/4/edit?html,css,output">在线示例</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> </div> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item { border: 1px solid green; } .container { border: 1px solid red; height: 200px; width: 200px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: row dense; /* .item3 提前放置于 .item1 右边 */ } .item1, .item2 { grid-column: span 2; /* 2fr */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow-的缩写"> grid（ grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow 的缩写） <a href="#grid-grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid">CSS Grid Layout Guide | CSS-Tricks#aa-grid</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid">grid - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>grid</code> 是 <code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code>、<code>grid-auto-rows</code>、<code>grid-auto-columns</code>、<code>grid-auto-flow</code> 的缩写。 创建显性网格时用法与 <code>grid-template</code> 一样。 创建隐性网格时有 2 种用法（左边设置横排，右边设置竖排，中间以 <code>/</code> 分隔）： <ol> <li>显性横排，隐性竖排，<code>grid-auto-flow</code> 为 <code>column</code>：<code><grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?</code></li> <li>隐性横排，显性竖排，<code>grid-auto-flow</code> 为 <code>row</code>：<code>[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns></code></li> </ol> 显性横排隐性竖排示例（<a href="https://jsbin.com/cizeyuquju/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { /* 横排比例 1:2:1，按照竖排方向放置网格项，竖排尺寸 50px */ grid: 1fr 2fr 1fr / auto-flow 50px; } </code></pre></td></tr></table> </div> </div>隐性横排显性竖排示例（<a href="https://jsbin.com/kudedigoki/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { /* 隐性横排，按照横排方向放置网格项，竖排比例 1:2:1 */ grid: auto-flow / 1fr 2fr 1fr; } </code></pre></td></tr></table> </div> </div><h2 class="heading" id="网格项的属性"> 网格项的属性 <a href="#%e7%bd%91%e6%a0%bc%e9%a1%b9%e7%9a%84%e5%b1%9e%e6%80%a7">#</a> </h2>网格项可以使用以下属性： <ul> <li>grid-column-start</li> <li>grid-column-end</li> <li>grid-row-start</li> <li>grid-row-end</li> <li>grid-column</li> <li>grid-row</li> <li>grid-area</li> <li>justify-self</li> <li>align-self</li> <li>place-self</li> <li>subgrid</li> <li>order</li> </ul> <h3 class="heading" id="grid-column-startgrid-column-endgrid-row-startgrid-row-end-网格项位置"> grid-column-start、grid-column-end、grid-row-start、grid-row-end 网格项位置 <a href="#grid-column-startgrid-column-endgrid-row-startgrid-row-end-%e7%bd%91%e6%a0%bc%e9%a1%b9%e4%bd%8d%e7%bd%ae">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-column-startgrid-column-endgrid-row-startgrid-row-end">CSS Grid Layout Guide | CSS-Tricks#aa-grid-column-startgrid-column-endgrid-row-startgrid-row-end</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">grid-column-start - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">grid-column-end - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">grid-row-start - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">grid-row-end - CSS: Cascading Style Sheets | MDN</a></li> </ul> 这几个属性通过网格线的起点与终点规定 1 个网格项的位置，默认值为 <code>auto</code>（自动放置）。<code>span 数字</code> 表示占用多少个网格轨道，不加数字时为 1。 示例（<a href="https://jsbin.com/deluduhupo/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item-x">x</div> </div> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { border: 1px solid red; height: 400px; display: grid; grid-template: 1fr 1fr 1fr / 1fr [col2-start] 1fr 1fr; } .item { border: 1px solid green; } .item-x { /* 从 col2-start 竖网格线到倒数第 1 条竖网格线 */ grid-column-start: col2-start; grid-column-end: -1; /* 从第 2 条横网格线开始，占用 2 个横向网格轨道 */ grid-row-start: 2; grid-row-end: span 2; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-columngrid-column-startgrid-column-end-的缩写grid-rowgrid-row-startgrid-row-end-的缩写"> grid-column（grid-column-start、grid-column-end 的缩写）、grid-row（grid-row-start、grid-row-end 的缩写） <a href="#grid-columngrid-column-startgrid-column-end-%e7%9a%84%e7%bc%a9%e5%86%99grid-rowgrid-row-startgrid-row-end-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-columngrid-row">CSS Grid Layout Guide | CSS-Tricks#aa-grid-columngrid-row</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">grid-column - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">grid-row - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>grid-column</code> 是 <code>grid-column-start / grid-column-end</code> 的缩写，使用 1 个值时只设置 <code>grid-column-start</code>。 <code>grid-row</code> 是 <code>grid-row-start / grid-row-end</code> 的缩写，使用 1 个值时值设置 <code>grid-row-start</code>。 示例（<a href="https://jsbin.com/lokebuyibo/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item-x { grid-column: col2-start / -1; grid-row: 2 / span 2; /* grid-column-start: col2-start; grid-column-end: -1; grid-row-start: 2; grid-row-end: span 2; */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="grid-areagrid-row-startgrid-column-startgrid-row-endgrid-column-end-的缩写"> grid-area（grid-row-start、grid-column-start、grid-row-end、grid-column-end 的缩写） <a href="#grid-areagrid-row-startgrid-column-startgrid-row-endgrid-column-end-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3><code>grid-area</code> 有两个用法。一是 <code>grid-row-start / grid-column-start / grid-row-end / grid-column-end</code> 的缩写（吐槽：这个顺序不好读，<code>-start</code> 后面应该跟 <code>-end</code>）；二是搭配 <code>grid-template-area</code>，使用名称指定位置。 示例（<a href="https://jsbin.com/mekakujome/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item-x { grid-area: 2 / col2-start / span 2 / -1; /* grid-column: col2-start / -1; grid-row: 2 / span 2; grid-column-start: col2-start; grid-column-end: -1; grid-row-start: 2; grid-row-end: span 2; */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="justify-selfinline-轴横轴对齐"> justify-self，inline 轴（横轴）对齐 <a href="#justify-selfinline-%e8%bd%b4%e6%a8%aa%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3><code>justify-self</code> 设置 1 个网格项的 inline 轴（横轴）对齐方式，默认值是 <code>stretch</code>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item { justify-self: start | end | center | stretch; } </code></pre></td></tr></table> </div> </div><a href="https://jsbin.com/fuwimofede/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item4 { justify-self: center; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="align-selfblock-轴竖轴对齐"> align-self，block 轴（竖轴）对齐 <a href="#align-selfblock-%e8%bd%b4%e7%ab%96%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3><code>align-self</code> 设置 1 个网格项的 block 轴（竖轴）对齐方式，默认是 <code>stretch</code>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item { align-self: start | end | center | stretch; } </code></pre></td></tr></table> </div> </div><a href="https://jsbin.com/dapecabuja/1/edit?html,css,output">在线示例</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item4 { align-self: end; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="place-selfalign-selfjustify-self-的缩写"> place-self（align-self、justify-self 的缩写） <a href="#place-selfalign-selfjustify-self-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3>参考资料： <ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-place-self">CSS Grid Layout Guide | CSS-Tricks#aa-place-self</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-self">place-self - CSS: Cascading Style Sheets | MDN</a></li> </ul> <code>place-self</code> 是 <code>align-self justify-self</code> 的缩写，只使用 1 个值时同时设置两者。 示例： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item4 { place-self: center; /* 正中间 */ place-self: end start; /* 左下角 */ } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="subgrid-继承网格容器属性"> subgrid 继承网格容器属性 <a href="#subgrid-%e7%bb%a7%e6%89%bf%e7%bd%91%e6%a0%bc%e5%ae%b9%e5%99%a8%e5%b1%9e%e6%80%a7">#</a> </h3>参考资料：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid">Subgrid - CSS: Cascading Style Sheets | MDN</a> 虽然 <code>subgrid</code> 不是属性，但用于网格项，所以列举于此。 示例（<a href="https://jsbin.com/keqogeweki/1/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="container"> <div class="item item1">Item1</div> <div class="item item2">Item2</div> <div class="item item3">Item3</div> <div class="item item4">Item4</div> <div class="item item5">Item5</div> <div class="item item6">Item6, 4×4 <div class="item6-1">Item6.1, 1×1</div> <div class="item6-2">Item6.2, 1×1</div> </div> </div> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { border: 1px solid red; height: 400px; display: grid; grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; gap: 10px; } .item { border: 1px solid green; } .item6 { border: 1px solid yellow; grid-area: 2 / 2 / span 2 / span 2; display: grid; /* 用 subgrid 才能继承容器的 gap 属性， 可以删掉下面两行代码看看差异 */ grid-template-columns: subgrid; grid-template-rows: subgrid; } .item6-1 { border: 1px solid blue; /* 使用 .item6 的网格线编号，不要用 .container 的网格线编号 */ grid-column-start: 2; grid-row-start: 2; } .item6-2 { border: 1px solid blue; grid-column-start: 2; grid-row-start: 1; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="order-顺序"> order 顺序 <a href="#order-%e9%a1%ba%e5%ba%8f">#</a> </h3>参考资料：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">order - CSS: Cascading Style Sheets | MDN</a> 网格项默认按照源代码顺序出现。<code>order</code> 设置网格项的出现顺序，默认值为 <code>0</code>，可使用正数和负数。 示例（<a href="https://jsbin.com/kihehuxiso/6/edit?html,css,output">在线版</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item1 { order: 1; } .item9 { order: -1; } </code></pre></td></tr></table> </div> </div><h2 class="heading" id="待写内容"> 待写内容 <a href="#%e5%be%85%e5%86%99%e5%86%85%e5%ae%b9">#</a> </h2> <ul> <li>auto-fill/auto-fit（<a href="https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/">Auto-Sizing Columns In CSS Grid: <code>auto-fill</code> Vs <code>auto-fit</code> | CSS-Tricks</a>）</li> <li>min-content/max-content（<a href="https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size">Intrinsic size - MDN Web Docs Glossary: Definitions of Web-related terms | MDN</a>）</li> <li>masonry（<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout">Masonry layout - CSS: Cascading Style Sheets | MDN</a>）</li> </ul> <h2 class="heading" id="参考资料"> 参考资料 <a href="#%e5%8f%82%e8%80%83%e8%b5%84%e6%96%99">#</a> </h2><ul> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS Grid Layout Guide | CSS-Tricks</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids - Learn web development | MDN</a></li> <li><a href="https://www.joshwcomeau.com/css/interactive-guide-to-grid/">An Interactive Guide to CSS Grid • Josh W. Comeau</a></li> <li><a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a></li> <li><a href="https://www.w3.org/TR/css-grid-2/">CSS Grid Layout Module Level 2</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid">Subgrid - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout">Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/">Auto-Sizing Columns In CSS Grid: <code>auto-fill</code> Vs <code>auto-fit</code> | CSS-Tricks</a></li> </ul> <h2 class="heading" id="图片出处"> 图片出处 <a href="#%e5%9b%be%e7%89%87%e5%87%ba%e5%a4%84">#</a> </h2>本文使用的图片出自 <a href="https://www.w3.org/TR/css-grid-1/#grid-concepts">CSS Grid Layout Module Level 1#grid-concepts</a>。 <h2 class="heading" id="练习"> 练习 <a href="#%e7%bb%83%e4%b9%a0">#</a> </h2><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grid - Learn web development | MDN</a></li> <li><a href="https://cssgridgarden.com/">Grid Garden - A game for learning CSS grid</a></li> </ul>

2024/9/15

CSS Flexbox 布局教程

Flexbox（弹性盒子）是一维的布局方法，也就是在一条横线（row）或者竖线（column）上排列元素。推荐大家看完本文后做<a href="https://cyrusyip.org/zh-cn/posts/2024/09/06/css-flexbox-layout-guide/#%e4%b9%a0%e9%a2%98">文末提到的习题</a>。 <h2 class="heading" id="flex-容器的属性"> flex 容器的属性 <a href="#flex-%e5%ae%b9%e5%99%a8%e7%9a%84%e5%b1%9e%e6%80%a7">#</a> </h2>flex 容器（flex container）的属性有 <code>display</code>、<code>flex-direction</code>、<code>flex-wrap</code>、<code>flex-flow</code>、<code>justify-content</code>、<code>align-items</code>、<code>align-content</code>、<code>row-gap</code>、<code>column-gap</code>、<code>gap</code>。 <h3 class="heading" id="flex-容器与-flex-项"> flex 容器与 flex 项 <a href="#flex-%e5%ae%b9%e5%99%a8%e4%b8%8e-flex-%e9%a1%b9">#</a> </h3>以下的 <code>section</code> 元素包含了 3 个 <code>article</code> 元素。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><section> <article>Article 1</article> <article>Article 2</article> <article>Article 3</article> </section> </code></pre></td></tr></table> </div> </div>要排列 <code>article</code> 元素，将它们的父元素设置为 flex 容器。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">section { display: flex | inline-flex; /* inline-flex 表示容器是 inline 元素 */ } </code></pre></td></tr></table> </div> </div>在上述例子中，<code>section</code> 元素是 flex 容器（flex container），<code>article</code> 元素是 flex 项（flex item）。 <h3 class="heading" id="flex-direction-方向主轴交叉轴"> flex-direction 方向、主轴、交叉轴 <a href="#flex-direction-%e6%96%b9%e5%90%91%e4%b8%bb%e8%bd%b4%e4%ba%a4%e5%8f%89%e8%bd%b4">#</a> </h3><code>flex-direction</code> 定义排列方向和主轴。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { flex-direction: row | row-reverse | column | column-reverse; } </code></pre></td></tr></table> </div> </div><ul> <li><code>row</code>（默认值）：横向，和文字方向（<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir">dir</a>）一致，如果方向是从左往右，那么就是从左往右排列子元素</li> <li><code>row-reverse</code>：和前者相反，从右往左</li> <li><code>column</code>：纵向，从上到下</li> <li><code>column-reverse</code>：和前者相反，从下到上</li> </ul> 主轴（main axis）就是和 flex 项排列方向一致的轴，交叉轴（cross axis）则是与主轴垂直的轴。一定要分清楚方向和两条轴，在对齐 flex 项时会用到。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: flex; flex-direction: row; } </code></pre></td></tr></table> </div> </div>上述代码表示从左到右排列 flex 项，主轴是从左到右，交叉轴是从上到下。 <figure> <img src="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg"><figcaption>轴的图示</figcaption></figure><h3 class="heading" id="flex-wrap-换行"> flex-wrap 换行 <a href="#flex-wrap-%e6%8d%a2%e8%a1%8c">#</a> </h3><code>flex-wrap</code> 控制是否换行，默认不换行。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { flex-wrap: nowrap | wrap | wrap-reverse; } </code></pre></td></tr></table> </div> </div><ul> <li><code>nowrap</code>（默认值）：全部 flex 项排列成一条线</li> <li><code>wrap</code>：溢出时换行</li> <li><code>wrap-reverse</code>：溢出时换行，但后面的元素会排到前面</li> </ul> 示例代码（<a href="https://jsbin.com/yatubohoqe/7/edit?html,css,output">在线示例</a>）： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><section> <article>Article 1</article> <article>Article 2</article> <article>Article 3</article> <article>Article 4</article> <article>Article 5</article> <article>Article 6</article> <article>Article 7</article> <article>Article 8</article> <article>Article 9</article> </section> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">section { display: flex; flex-direction: row; flex-wrap: wrap-reverse; } article { width: 100%; outline: 1px solid green; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="flex-flowflex-direction-和-flex-wrap-的缩写"> flex-flow（flex-direction 和 flex-wrap 的缩写） <a href="#flex-flowflex-direction-%e5%92%8c-flex-wrap-%e7%9a%84%e7%bc%a9%e5%86%99">#</a> </h3><code>flex-flow</code> 是 <code>flex-direction</code> 和 <code>flex-wrap</code> 的缩写，默认值为 <code>row nowrap</code>。 下面两份代码效果一样： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">section { flex-direction: row; flex-wrap: wrap; } </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">section { flex-flow: row wrap; } </code></pre></td></tr></table> </div> </div><h3 class="heading" id="justify-content-主轴对齐"> justify-content 主轴对齐 <a href="#justify-content-%e4%b8%bb%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3><code>justify-content</code> 设置主轴的对齐方式。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } </code></pre></td></tr></table> </div> </div>下面只介绍常用的值。 <ul> <li><code>flex-start</code>（默认）：将所有 flex 项放到主轴的起点。如果主轴是 row（从左到右），那么所有 flex 项贴近左边。例子（<code>.</code> 表示空间）：<code>Item1Item2Item3......</code>。</li> <li><code>flex-end</code>：将所有 flex 项放到主轴的终点。例子：<code>......Item1Item2Item3</code>。</li> <li><code>center</code>：将所有 flex 项放在主轴的中间。例子：<code>....Item1Item2Item3....。</code></li> <li><code>space-between</code>：均匀分配 flex 项，每个 flex 项之间的距离一样，头部 flex 项贴近主轴开头，尾部 flex 项贴近主轴末尾，例子：<code>Item1..Item2..Item3</code>。</li> <li><code>space-around</code>：均匀分配 flex 项，每个 flex 项的前后间隔一样，例子：<code>.Item1..Item2..Item3.</code>。</li> <li><code>space-evenly</code>：均匀分配 flex 项，每个 flex 项之间的距离一样，头部 flex 项和主轴开头有一样的距离，尾部 flex 项和主轴末尾有一样的距离。例子：<code>..Item1..Item2..Item3..</code>。</li> </ul> <h3 class="heading" id="align-items-交叉轴对齐"> align-items 交叉轴对齐 <a href="#align-items-%e4%ba%a4%e5%8f%89%e8%bd%b4%e5%af%b9%e9%bd%90">#</a> </h3>交叉轴垂直于主轴。<code>align-items</code> 设置交叉轴的对齐方式。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } </code></pre></td></tr></table> </div> </div><code>align-items</code> 用法和 <code>justify-content</code> 类似，这里介绍一些不一样的值。 <ul> <li><code>stretch</code>（默认值）：使 flex 项填满容器。</li> <li><code>baseline</code>：根据基线对齐，用于字体大小不同的 flex 项，<a href="https://stackoverflow.com/questions/34606879/whats-the-difference-between-flex-start-and-baseline/34611670#34611670">图示</a>。</li> </ul> <h3 class="heading" id="align-content-交叉轴对齐仅用于多行-flex-项"> align-content 交叉轴对齐（仅用于多行 flex 项） <a href="#align-content-%e4%ba%a4%e5%8f%89%e8%bd%b4%e5%af%b9%e9%bd%90%e4%bb%85%e7%94%a8%e4%ba%8e%e5%a4%9a%e8%a1%8c-flex-%e9%a1%b9">#</a> </h3><code>align-content</code> 设置多行 flex 项的交叉轴对齐方式，flex 项只有一行时（<code>flex-wrap: nowrap;</code>）无效，<a href="https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items/34944673#34944673">图示</a>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } </code></pre></td></tr></table> </div> </div><code>align-content</code> 用法和 <code>align-items</code> 类似。 <h3 class="heading" id="row-gapcolumn-gapgap-间隔"> row-gap、column-gap、gap 间隔 <a href="#row-gapcolumn-gapgap-%e9%97%b4%e9%9a%94">#</a> </h3>如果在 flex 项上画横线和竖线，<code>row-gap</code> 表示横线的间隔大小，<code>column-gap</code> 表示竖线的间隔大小，<code>gap</code> 是前面两者的缩写，<a href="https://jsbin.com/maliponaje/7/edit?html,css,output">在线示例</a>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 5px; gap: 20px 5px; /* row-gap, column-gap */ gap: 20px; /* row-gap 和 column-gap 都是 20px */ } </code></pre></td></tr></table> </div> </div><code>gap</code> 只是设置最小间隔，使用 <code>space-between</code> 可以加大间隔。 <h2 class="heading" id="flex-项的属性"> flex 项的属性 <a href="#flex-%e9%a1%b9%e7%9a%84%e5%b1%9e%e6%80%a7">#</a> </h2>flex 项（flex item）的属性有 <code>order</code>、<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code>、<code>flex</code>、<code>align-self</code>。 flexbox 没有 <code>justify-self</code>，参看 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#there_is_no_justify-self_in_flexbox">Box alignment in flexbox - CSS: Cascading Style Sheets | MDN#there_is_no_justify-self_in_flexbox</a>。 <h3 class="heading" id="order-顺序"> order 顺序 <a href="#order-%e9%a1%ba%e5%ba%8f">#</a> </h3>默认情况下，flex 项按照源代码出现的顺序排列。使用 <code>order</code> 属性可以改变顺序，默认值为 0，数字越大位置越后，可以使用负值（比如：-1）。如果多个 flex 项的 <code>order</code> 值一样，它们还是按原始顺序排列。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">#item1 { order: 2; } #item2 { order: 1; } #item3 { order: -1; } </code></pre></td></tr></table> </div> </div>图示： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">item3 | item2 | item1 </code></pre></td></tr></table> </div> </div><h3 class="heading" id="flex-basis-大小"> flex-basis 大小 <a href="#flex-basis-%e5%a4%a7%e5%b0%8f">#</a> </h3><code>flex-basis</code> 设置 flex 项的大小，默认为 <code>auto</code>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.item { <span class="

叶寻的博客

一加 Ace 3 从 LineageOS 回到 ColorOS

傻屄不是傻逼

可复现不沾铁锅

工行爱车信用卡：每月加油可省 20 元

自己动手去除车玻璃油膜

PRORASO 桉树薄荷剃须皂使用体验

我不用或少用的剃须装备和护肤品

我用的剃须装备和护肤品

将一加 Ace 3 从 LineageOS 22.2 升级到 23.0

给一加 Ace 3 安装 LineageOS 22.2

别过度手动剃须

同诗 S9 便携剃须刀使用体验

Arko 剃须皂棒使用体验

ISOOQI 明矾棒使用体验

舒适超巧：也许是盒式剃须刀的终点

第一次独自开车

吉列云感：适合新手的剃须刀

赌气跟随超车的惊魂时刻

开自动挡不看挡杆换挡教程

英语的语气（陈述语气、祈使语气、虚拟语气）

开车通过路口和人行道的注意事项

触发 ABS，克服急刹恐惧

从看蔡徐坤的迷因到听蔡徐坤的歌

第一次交通事故

自动挡挡位的英文全称、含义和用法

新手开车感受

自动挡半坡起步方法（手刹、左脚刹车、右脚刹车、上坡辅助、自动驻车、电子手刹）

C2 自动挡汽车驾照考试经验

再次用手动剃须刀

给一加 Ace 3 升级固件

解锁 Redmi K40S（HyperOS 1.0）的 bootloader

英式英语音标

KK 音标、DJ 音标、IPA 音标对照表

排查手机卡顿

痛失小米 9 SE

将一加 Ace 3 从 PixelOS 14 升级到 PixelOS 15

用文本文件制作 Anki 牌组

在闲鱼遭遇到手后砍价，最后拿回货款

了解与使用 Android 的 root 权限

推荐可以刷机的一加 Ace 3

小米已退烧

一加 Ace 3 刷机前的准备与安装 PixelOS 的过程

OPPO / 一加 / ColorOS 的 Google Play 安装教程

概念解析：物理像素、逻辑像素、CSS 像素、物理分辨率、逻辑分辨率

jQuery 使用笔记

优化 Hugo 博客速度：Pjax、dynamic script、preload、minification

将 LineageOS 20 升级到 LineageOS 21

开放的心态

冷泡茶教程

QWERTY 键盘标点符号的中英文名称

少囤草稿，尽快发布

菜谱：酱油蒜香炒蛋

CSS Grid 布局教程

CSS BEM 命名规范入门教程

CSS Flexbox 布局教程