grid布局确实很好用，通过作业的训练，稍微熟悉了一些，之后应该还需要多练习一些，终于有一点自己在写一个网站的感觉了。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>grid操作练习</title><style>/* 通用属性设置 */html {font-size: 14px;}body {display: flex;place-content: start center;background-color: azure;}img {width: 100%;height: 100%;}a {font-size: 1.2rem;text-decoration: none;}h3 {color: rgb(78, 21, 21);padding-left: 8px;}.tittle {color: black;font: 0.9em sans-serif;}.abstract {color: #353535;font: 0.7em sans-serif;}.container {/* 设置容器大小 */width: 90vw;height: 100vh;background-color: #ffffff;/* justify-content: stretch;align-content: stretch; *//* 创建grid容器 */display: grid;grid-template-rows: 70px 1fr 1fr 50px;grid-template-columns: 1fr 1fr 30%;/* 命名容器区域 */grid-template-areas:"header header header"". . . "". . . ""footer footer footer";/* 项目对齐方式 */place-items: center;gap: 2px;}/* 设置项目基本属性 */.item {background-color: #fff;justify-self: stretch;align-self: stretch;}/* 设置页眉区域项目 */.item.item1 {background-color: #353535;grid-area: header;display: flex;justify-items: center;justify-content: space-between;align-items: center;align-content: center;}.item.item1>.logo {margin-left: 2vw;width: 180px;height: 40px;}.item.item1>.nav {list-style: none;display: flex;justify-content: space-around;width: 100%;text-align: right;color: goldenrod;}.item.item1>.nav>li>a>span {color: goldenrod;}.item.item2 {width: 100%;height: 100%;background-color: lightcoral;grid-area: 2/1/3/3;}.item.item3,.item.item4 {height: auto;padding-right: 5px;border: 1px #c0c0c0 solid;background-color: #ebebeb;border-radius: 5px;}.item.item3>ul>li,.item.item4>ul>li {margin: 5px 2px;}.item.item5 {height: auto;background-color: #f9f9f9;grid-area: 2/3/span 2/span 1;border: 1px #c0c0c0 solid;border-radius: 7px;display: flex;flex-flow: column nowrap;place-items: center;padding: 10px;}.item.item5>.touxiang {width: 50%;}/* 设置页脚区域项目 */.item.item6 {display: flex;width: 100%;background-color: gray;grid-area: footer;justify-content: space-around;align-items: center;}.item.item6>a {text-decoration: none;}.item.item6>a>span,.item.item6>span {padding: 5px;text-decoration-line: none;color: honeydew;font-size: 12px;}</style></head><body><div class="container"><div class="item item1"><div class="logo"><img src="images/logo.png" alt="logo"></div><ul class="nav"><li><a href="" class="link"><span>首页</span></a></li><li><a href="" class="link"><span>博客</span></a></li><li><a href="" class="link"><span>相册</span></a></li><li><a href="" class="link"><span>关于</span></a></li></ul></div><div class="item item2"><img src="images/zxkc4.png" alt="公益直播课即将开播"></div><div class="item item3"><h3>推荐阅读</h3><ul><li><a href=""><span class="tittle">css栅格化布局方式</span><br><spanclass="abstract">css的栅格化处理通常需要借助grid这一方式，grid可以将网页元素以...</span></a></li><li><a href=""><span class="tittle">html表单属性的运用实例</span><br><spanclass="abstract">html的表单操作是一个十分重要的内容，特别是一些交互功能几乎依赖...</span></a></li><li><a href=""><span class="tittle">使用小皮管理云服务器</span><br><spanclass="abstract">小皮面板是php中文网开发的一款用于php环境快速配置与管理...</span></a></li></ul></div><div class="item item4"><h3>近期更新</h3><ul><li><a href=""><span class="tittle">css栅格化布局方式</span><br><span class="abstract">css的栅格化处理通常需要借助grid这一方式，grid可以将网页元素以...</span></a></li><li><a href=""><span class="tittle">html表单属性的运用实例</span><br><span class="abstract">html的表单操作是一个十分重要的内容，特别是一些交互功能几乎依赖...</span></a></li><li><a href=""><span class="tittle">使用小皮管理云服务器</span><br><span class="abstract">小皮面板是php中文网开发的一款用于php环境快速配置与管理...</span></a></li></ul></div><div class="item item5"><div class="touxiang"><img src="images/login.png" alt="头像"></div><h3>张三</h3><p>您于2020年4月14日 14:32 在 中国上海市 登录本站。</p><div class=""><h4>按月份排列</h4><ul><li><a href=""><span class="tittle">2020年04月</span><span class="abstract">(4)</span></a></li><li><a href=""><span class="tittle">2020年03月</span><span class="abstract">(12)</span></a></li><li><a href=""><span class="tittle">2020年01月</span><span class="abstract">(3)</span></a></li><li><a href=""><span class="tittle">2019年12月</span><span class="abstract">(1)</span></a></li></ul></div></div><div class="item item6"><a href=""><span>网站地图</span></a><a href=""><span>博客管理</span></a><a href=""><span>联系站长</span></a><a href=""><span>留言</span></a><span>本站文章仅代表作者个人观点，未经允许不得转载</span></div></div></body></html>