https://biboer.cn/tags/%E7%BD%91%E7%AB%99/Recent content in 网站 on 如如居Hugozh-cnWed, 15 Oct 2025 11:00:00 +0000https://biboer.cn/post/readme/Thu, 01 Feb 2024 11:00:00 +0000https://biboer.cn/post/readme/<h2 id="思路">思路</h2> <ol> <li> <p>gitea server内容管理工具。 ✅</p> </li> <li> <p>hugo作为web发布工具。 ✅</p> </li> <li> <p><strong>shell脚本，一键发布</strong>。 ✅</p> </li> <li> <p>整体过程：本地变更 - git push - 登录remote - pull - hugo发布 - 检查服务(nginx/gitea/mount)<br> git管理和hugo网站管理完全融合。内容修改后，执行shell，git变更和hugo发布都完成。 ✅</p>https://biboer.cn/post/cssgrid/Wed, 15 Oct 2025 11:00:00 +0000https://biboer.cn/post/cssgrid/<h1 id="-css-grid-一览表默认值--可选值">📋 CSS Grid 一览表（默认值 + 可选值）</h1> <h2 id="1-容器属性grid-container">1. 容器属性（Grid Container）</h2> <table> <thead> <tr> <th>属性</th> <th>默认值 / 可选值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>display</td> <td>block → grid / inline-grid</td> <td>定义网格容器</td> </tr> <tr> <td>grid-template-columns</td> <td>none → 长度 / 百分比 / fr / repeat() / minmax()</td> <td>定义列宽</td> </tr> <tr> <td>grid-template-rows</td> <td>none → 长度 / 百分比 / fr / repeat() / minmax()</td> <td>定义行高</td> </tr> <tr> <td>grid-template-areas</td> <td>none → 字符串区域</td> <td>命名区域布局</td> </tr> <tr> <td>grid-auto-rows</td> <td>auto → 长度 / minmax()</td> <td>隐式生成行的高度</td> </tr> <tr> <td>grid-auto-columns</td> <td>auto → 长度 / minmax()</td> <td>隐式生成列的宽度</td> </tr> <tr> <td>grid-auto-flow</td> <td>row → row / column / row dense / column dense</td> <td>自动放置方向与填充策略</td> </tr> <tr> <td>gap</td> <td>0 → 长度</td> <td>行列间距（简写）</td> </tr> <tr> <td>row-gap</td> <td>0 → 长度</td> <td>行间距</td> </tr> <tr> <td>column-gap</td> <td>0 → 长度</td> <td>列间距</td> </tr> </tbody> </table> <hr> <h2 id="2-容器对齐">2. 容器对齐</h2> <table> <thead> <tr> <th>属性</th> <th>默认值 / 可选值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>justify-items</td> <td>stretch → start / end / center / stretch</td> <td>所有项目水平对齐方式</td> </tr> <tr> <td>align-items</td> <td>stretch → start / end / center / stretch</td> <td>所有项目垂直对齐方式</td> </tr> <tr> <td>place-items</td> <td>— → align justify</td> <td>align-items + justify-items 简写</td> </tr> <tr> <td>justify-content</td> <td>start → start / end / center / space-between / space-around / space-evenly</td> <td>网格整体水平分布</td> </tr> <tr> <td>align-content</td> <td>start → start / end / center / space-between / space-around / space-evenly</td> <td>网格整体垂直分布</td> </tr> <tr> <td>place-content</td> <td>— → align justify</td> <td>align-content + justify-content 简写</td> </tr> </tbody> </table> <hr> <h2 id="3-项目属性grid-item">3. 项目属性（Grid Item）</h2> <table> <thead> <tr> <th>属性</th> <th>默认值 / 可选值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>grid-column-start</td> <td>auto → 数字 / 名称 / span n</td> <td>起始列线</td> </tr> <tr> <td>grid-column-end</td> <td>auto → 数字 / 名称 / span n</td> <td>结束列线</td> </tr> <tr> <td>grid-row-start</td> <td>auto → 数字 / 名称 / span n</td> <td>起始行线</td> </tr> <tr> <td>grid-row-end</td> <td>auto → 数字 / 名称 / span n</td> <td>结束行线</td> </tr> <tr> <td>grid-column</td> <td>— → start / end</td> <td>列范围（简写）</td> </tr> <tr> <td>grid-row</td> <td>— → start / end</td> <td>行范围（简写）</td> </tr> <tr> <td>grid-area</td> <td>— → 区域名 / 行列范围</td> <td>指定区域或位置</td> </tr> <tr> <td>justify-self</td> <td>stretch → start / end / center / stretch</td> <td>单元格内水平对齐</td> </tr> <tr> <td>align-self</td> <td>stretch → start / end / center / stretch</td> <td>单元格内垂直对齐</td> </tr> <tr> <td>place-self</td> <td>— → align justify</td> <td>align-self + justify-self 简写</td> </tr> </tbody> </table> <hr> <h2 id="4-常用函数">4. 常用函数</h2> <table> <thead> <tr> <th>函数</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>repeat(n, value)</td> <td>重复定义轨道</td> </tr> <tr> <td>minmax(min, max)</td> <td>定义最小与最大尺寸</td> </tr> <tr> <td>auto-fit</td> <td>自动填充并拉伸项目以填满空间</td> </tr> <tr> <td>auto-fill</td> <td>自动填充但不强制拉伸</td> </tr> </tbody> </table> <h2 id="-对齐方式速查">📐 对齐方式速查</h2> <ul> <li><strong>align-content / justify-content</strong>: 作用于整个网格 <ul> <li><code>start</code> / <code>end</code> / <code>center</code> / <code>stretch</code> / <code>space-between</code> / <code>space-around</code> / <code>space-evenly</code></li> </ul> </li> <li><strong>align-items / justify-items</strong>: 作用于单元格内所有项目 <ul> <li><code>start</code> / <code>end</code> / <code>center</code> / <code>stretch</code></li> </ul> </li> <li><strong>align-self / justify-self</strong>: 单独控制某个项目 <ul> <li><code>start</code> / <code>end</code> / <code>center</code> / <code>stretch</code></li> </ul> </li> </ul> <h2 id="图示1">图示1</h2> <p>![[cssgrid.png]] ![[cssgrid-1.png]] ![[cssgrid-2.png]] ![[cssgrid-3.png]] ![[cssgrid-4.png]] ![[cssgrid-5.png]]</p>