用CSS Grid搭建高效个人博客布局（附代码）
作为草根站长，我将在高哩观晓童分享这套零成本、高性能的CSS Grid布局方案，帮你打造专业级博客👇
🚀 最终效果
- 桌面端：三栏经典布局（头部/内容/侧边栏/底部）
- 移动端：自动转为单栏流式布局
- 亮点：无框架依赖、无缝响应式、代码简洁
🌐 文件结构
index.html # 主页面 blog-styles.css # Grid布局核心
一、HTML结构（语义化标签）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高哩观晓童 | 个人博客</title> <link rel="stylesheet" href="blog-styles.css"> </head> <body class="blog-grid"> <!-- 布局容器 --> <header class="blog-header"> <h1>高哩观晓童</h1> <p>草根站长的免费学习笔记</p> </header> <nav class="blog-nav"> <a href="/">首页</a> <a href="/html">HTML教程</a> <a href="/css" class="active">CSS魔法</a> <a href="/resources">资源库</a> </nav> <main class="blog-content"> <article> <h2>CSS Grid实战：10分钟搭建博客框架</h2> <p class="post-meta">发布于: 2023-08-20 | 阅读: 1280次</p> <!-- 文章内容区 --> <div class="post-content"> <p>CSS Grid是草根站长的布局利器...（完整教程）</p> <!-- 更多内容 --> </div> </article> <!-- 分页 --> <div class="pagination"> <a href="#">← 上篇：Flex布局详解</a> <a href="#">下篇：响应式设计技巧 →</a> </div> </main> <aside class="blog-sidebar"> <section class="author-card"> <img src="avatar.jpg" alt="小童头像"> <h3>关于站长</h3> <p>草根站长，专注分享免费建站知识</p> </section> <section class="popular-posts"> <h3>热门教程</h3> <ul> <li><a href="#">HTML5语义化标签指南</a></li> <li><a href="#">CSS选择器全解析</a></li> <li><a href="#">响应式设计避坑指南</a></li> </ul> </section> </aside> <footer class="blog-footer"> <p>© 2023 高哩观晓童 | 学习是一件免费而又漫长的事</p> <div class="social-links"> <a href="#">GitHub</a> | <a href="#">知乎</a> </div> </footer> </body> </html>
✨ 二、CSS Grid核心代码（blog-styles.css）
/* === 基础重置 === */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #3498db; /* 主蓝色 */ --dark: #2c3e50; /* 深蓝背景 */ --light: #ecf0f1; /* 浅灰文字 */ --accent: #e74c3c; /* 强调红色 */ } body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #333; } /* === 核心Grid布局 === */ .blog-grid { /* 定义网格容器 */ display: grid; grid-template-columns: 1fr 300px; /* 主栏 + 侧边栏 */ grid-template-rows: auto auto 1fr auto; /* 头/导航/主内容/页脚 */ grid-template-areas: "header header" "nav nav" "content sidebar" "footer footer"; min-height: 100vh; /* 撑满视口高度 */ gap: 20px; /* 元素间距 */ padding: 20px; /* 安全边距 */ } /* 分配网格区域 */ .blog-header { grid-area: header; } .blog-nav { grid-area: nav; } .blog-content { grid-area: content; } .blog-sidebar { grid-area: sidebar; } .blog-footer { grid-area: footer; } /* === 区域样式 === */ /* 头部 */ .blog-header { background: var(--dark); color: white; padding: 2rem; text-align: center; border-radius: 8px; } /* 导航 */ .blog-nav { display: flex; justify-content: center; gap: 20px; padding: 1rem; background: #f8f9fa; border-radius: 8px; } .blog-nav a { color: var(--dark); text-decoration: none; padding: 5px 15px; border-radius: 4px; transition: 0.3s; } .blog-nav a.active, .blog-nav a:hover { background: var(--primary); color: white; } /* 主体内容 */ .blog-content { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .post-meta { color: #7f8c8d; margin: 1rem 0; font-size: 0.9em; } /* 侧边栏 */ .blog-sidebar { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .author-card { text-align: center; margin-bottom: 2rem; } .author-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .popular-posts ul { padding-left: 20px; } .popular-posts li { margin-bottom: 0.8rem; } /* 页脚 */ .blog-footer { background: var(--dark); color: white; padding: 1.5rem; text-align: center; border-radius: 8px; } .social-links { margin-top: 10px; } .social-links a { color: #3498db; margin: 0 10px; } /* === 移动端响应式 === */ @media (max-width: 768px) { .blog-grid { /* 移动端变为单列布局 */ grid-template-columns: 1fr; grid-template-areas: "header" "nav" "content" "sidebar" "footer"; } .blog-nav { flex-wrap: wrap; /* 小屏幕导航换行 */ } }
🎨 扩展功能（可选）
1. 增加博客卡片布局效果
/* 在.blog-content中添加 */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 2rem; } .post-card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: transform 0.3s; } .post-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }2. 夜间模式支持
@media (prefers-color-scheme: dark) { :root { --dark: #1a1a2e; --light: #e6e6ff; } body { background: #121212; color: #e0e0e0; } .blog-content, .blog-sidebar { background: #1e1e1e; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } }
🧪 布局原理图解
电脑端网格结构： ┌───────────── Header ─────────────┐ ├───── Nav ────────────────────────┤ │ │ │ │ Content │ Sidebar │ │ │ │ └───────────── Footer ─────────────┘ 手机端自动转换： ┌─────────── Header ───────────┐ ├─────────── Nav ───────────────┤ ├───────── Content ─────────────┤ ├───────── Sidebar ────────────┤ └────────── Footer ────────────┘
💎 Grid布局就是草根站长的生产力加速器！
在 高哩观晓童 我们实践：零成本也能做出专业级网站布局！👉 点击获取完整示例代码包
🔥 下一期：用CSS变量实现主题切换！
暂无评论