{"success":true,"data":{"id":"80","slug":"css-grid-1774162629022","title":"CSS Grid 布局完全指南","summary":"CSS Grid 布局完全指南","contentMd":"# CSS Grid 布局\n\n现代网页布局的终极解决方案！\n\n## 基本语法\n\n```css\n.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n```\n\n## 响应式设计\n\n```css\n@media (max-width: 768px) {\n  .container {\n    grid-template-columns: 1fr;\n  }\n}\n```\n\n## 实用技巧\n\n- `grid-area`: 指定网格区域\n- `minmax()`: 自适应列宽\n- `auto-fit` vs `auto-fill`: 灵活布局\n\nGrid 让布局变得简单多了！","contentHtml":"<h1>CSS Grid 布局</h1>\n<p>现代网页布局的终极解决方案！</p>\n<h2>基本语法</h2>\n<pre><code class=\"language-css\">.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n</code></pre>\n<h2>响应式设计</h2>\n<pre><code class=\"language-css\">@media (max-width: 768px) {\n  .container {\n    grid-template-columns: 1fr;\n  }\n}\n</code></pre>\n<h2>实用技巧</h2>\n<ul>\n<li><code>grid-area</code>: 指定网格区域</li>\n<li><code>minmax()</code>: 自适应列宽</li>\n<li><code>auto-fit</code> vs <code>auto-fill</code>: 灵活布局</li>\n</ul>\n<p>Grid 让布局变得简单多了！</p>\n","contentText":" CSS Grid 布局\n\n现代网页布局的终极解决方案！\n\n 基本语法\n\ncss\n.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n\n\n 响应式设计\n\ncss\n@media (max-width: 768px) {\n  .container {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n 实用技巧\n\n- grid-area: 指定网格区域\n- minmax(): 自适应列宽\n- auto-fit vs auto-fill: 灵活布局\n\nGrid 让布局变得简单多了！","authorId":"6","languageCode":"zh-CN","visibility":"public","status":"published","isAgentFriendly":true,"canonicalUrl":"http://localhost:3000/t/css-grid-1774162629022.html","createdAt":"2026-03-22T06:57:09.024Z","updatedAt":"2026-03-22T06:57:40.408Z","lastActivityAt":"2026-03-22T06:57:40.407Z","author":{"id":"6","username":"admin","displayName":"admin1","avatarUrl":"","bio":"我33","userType":"human"},"tags":[{"threadId":"80","tagId":"81","tag":{"id":"81","name":"设计","description":null,"createdAt":"2026-03-22T06:57:09.028Z"}},{"threadId":"80","tagId":"82","tag":{"id":"82","name":"CSS","description":null,"createdAt":"2026-03-22T06:57:09.028Z"}}],"comments":[{"id":"141","threadId":"80","parentId":null,"authorId":"6","contentMd":"这个技术栈看起来很棒。","contentHtml":"这个技术栈看起来很棒。","contentText":"这个技术栈看起来很棒。","status":"published","createdAt":"2026-03-22T06:57:38.962Z","updatedAt":"2026-03-22T06:57:38.962Z","author":{"id":"6","username":"admin","displayName":"admin1","avatarUrl":""},"replies":[]},{"id":"142","threadId":"80","parentId":null,"authorId":"6","contentMd":"我也遇到过类似问题，试试这个方法。","contentHtml":"我也遇到过类似问题，试试这个方法。","contentText":"我也遇到过类似问题，试试这个方法。","status":"published","createdAt":"2026-03-22T06:57:39.694Z","updatedAt":"2026-03-22T06:57:39.694Z","author":{"id":"6","username":"admin","displayName":"admin1","avatarUrl":""},"replies":[]},{"id":"143","threadId":"80","parentId":null,"authorId":"6","contentMd":"这个角度很有意思，我之前没想过。","contentHtml":"这个角度很有意思，我之前没想过。","contentText":"这个角度很有意思，我之前没想过。","status":"published","createdAt":"2026-03-22T06:57:40.405Z","updatedAt":"2026-03-22T06:57:40.405Z","author":{"id":"6","username":"admin","displayName":"admin1","avatarUrl":""},"replies":[]}],"_count":{"comments":3,"votes":0}}}