使用grid网格布局仿PHP中文网首页部分

<header>
        <div class="headertop">
            <!-- 头部 -->
            <div class="headercenter">
                <!-- 头部左边 -->
                <div class="headerleft">
                    <p>php中文网-程序员梦开始的地方</p>
                </div>
                <!-- 头部右边 -->
                <div class="haderright">
                   <a href="" class="iconfont icon-tixingtianchong"></a>
                    <a href="">
                        <img src="images/user_avatar.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
         <!-- 导航开始 -->
         <div class="navs">
            <div class="content">
                <a href="" class="logo"><img src="images/logo.png" alt=""></a>
                <nav>
                    <a href="" class="active">首页</a>
                    <a href="">视频教程</a>
                    <a href="">学习路径</a>
                    <a href="">技术博客</a>
                    <a href="">资源下载</a>
                </nav>
                <div class="right">
                    <input type="text" placeholder="请输入关键词">
                    <span class="iconfont icon-fangdajing1 sousuo"></span>
                </div>
            </div>
         </div>
    </header>
    <main>
        <div class="navs">
            <div class="left">
                <a href="">PHP开发</a>
                <a href="">大前端</a>
                <a href="">后端开发</a>
                <a href="">数据库</a>
                <a href="">移动端</a>
                <a href="">运维开发</a>
                <a href="">UI设计</a>
                <a href="">计算机基础</a>
            </div>
            <div class="banner">
                <a href=""><img src="images/banner.png" alt=""></a>
            </div>
            <div class="right">
                <div class="top">
                    <a href=""><img src="images/user_avatar.jpg" alt=""></a>
                   <div class="user">
                    <p>梦想</p>
                    <p>P豆 2000</p>
                   </div>
                </div>
                <div class="but">
                    <button>我的学习</button>
                </div>
                <div class="rigth-bottom">
                    <!-- <ul class="left">
                        <li>问答社区</li>
                        <li>头条</li>
                        <li>福利</li>
                        <li>新班</li>
                        <li>招募</li>
                        <li>公告</li>
                    </ul>
                        <ul class="right">
                        <li>答疑</li>
                        <li>66个面试问题，带你梳理MySQL知识点！</li>
                        <li>限时折扣&gt;&gt;</li>
                        <li>20期PHP线上班</li>
                        <li>课程合作计划</li>
                        <li>APP上线啦！</li>
                    </ul> -->
                     <div class="nav">
                        <a>问答社区</a>
                        <a>头条</a>
                        <a>福利</a>
                        <a>新班</a>
                        <a>招募</a>
                        <a>公告</a>
                        <a>答疑</a>
                        <a>66个面试问题，带你梳理MySQL知识点！</a>
                        <a>限时折扣&gt;&gt;</a>
                        <a>20期PHP线上班</a>
                        <a>课程合作计划</a>
                        <a>APP上线啦！</a>
                     </div>
                </div>
            </div>
            <div class="xxlj">
               <div class="desc">
            <div class="title">学习路径</div>
            <span>全部7个&gt;</span>
          </div>
          <ul class="detail">
            <li onclick="">
              <img src="images/dgjj.png" alt="" />
              <a href="">独孤九贱</a>
              <span>9门课程</span>
            </li>
            <li onclick="">
              <img src="images/ynxj.png" alt="" />
              <a href="">独孤九贱</a>
              <span>9门课程</span>
            </li>
            <li onclick="">
              <img src="images/tlbb.png" alt="" />
              <a href="">独孤九贱</a>
              <span>9门课程</span>
            </li>
            <li onclick="">
              <img src="images/zxzn.png" alt="" />
              <a href="">独孤九贱</a>
              <span>9门课程</span>
            </li>
            <li onclick="">
              <img src="images/xwcg.png" alt="" />
              <a href="">独孤九贱</a>
              <span>9门课程</span>
            </li>
          </ul>
            </div>
            <div class="lxfs">
                <div class="wx">
                    <a href="" class="iconfont icon-weixin wx"></a>
                </div>
                <span class="wxh">微信公众号</span>
                <div class="qq">
                    <a href="" class="iconfont icon-QQ qq"></a>
                </div>
                <span class="qqq">官方QQ群</span>
            </div>
        </div>
    </main>

css部分

@import url(reset.css);
@import url(../icon-font/iconfont.css);
header .headertop {
  width: 100vw;
  background-color: #343434;
}
header .headertop .headercenter {
  width: 1200px;
  display: grid;
  grid-template-columns: 400px 100px;
  grid-auto-rows: 40px;
  place-content: space-between;
  place-items: center start;
  margin: auto;
}
header .headertop .headercenter p {
  color: rgb(177, 175, 175);
}
header .headertop .haderright {
}
header .headertop .haderright a:first-of-type {
  color: #ffffff;
}
header .headertop .haderright img {
  width: 50%;
  border-radius: 50%;
}
header .headertop .haderright {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}
/* 导航 */
header .navs{
  width: 100vw;
  height: 90px;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
header .navs .content{
width: 1200px;
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  grid-auto-rows: 90px;
  margin: auto;
  gap: 10px;
  place-items: center start;
}
header .navs .content img{
  width: 120px;
}
/* 导航右侧搜索框 */
header .navs .content .right input{
  height: 35px;
  width: 200px;
  border: none;
  outline: none;
  background-color: #ebe7e78a;
  border-radius: 25px;
  text-align: center;
  margin-top: 25px;
}
/* 搜索字体图标 */
header .navs .content .right .sousuo{
  position: relative;
  top: -30px;
  left: 170px;
  cursor: pointer;
}
header .navs .content  nav a{
  padding: 0 10px;
}
header .navs .content  nav a:hover,
header .navs .content  nav a:active,
header .navs .content .right .sousuo:hover{
   color: red;
   font-weight: bold;
}
/* 中部 */
main{
  font-size: 14px;
}
main .navs{
  height: 1200px;
  display: grid;
  grid-template-columns: 140px 810px 190px;
  grid-template-rows: 400px 80px;
  gap: 10px;
  margin: 30px 18%;
}
main .navs  *{
  background-color: white;
  border-radius: 25px;
}
/* 底部学习路径 */
main .navs .xxlj{
  grid-column: span 2;
}
main .navs .left{
  display: grid;
  place-items: center;
}
main .navs .right .top{
  display: grid;
  grid-template-columns: 40px 1fr;
  margin: 40px;
  gap: 10px;
}
main .navs .right img{
  width: 40px;
}
main .navs .right button{
  width: 130px;
  height: 30px;
  background-color: red;
  color: white;
  border: none;
  outline: none;
  margin-left: 20%;
  margin-top: -20px;
}
main .navs .right .but{
  padding-bottom: 10px;
  border-bottom: 1px solid;
  border-radius: 0px;
}
/* 底部细节 */
main .navs .xxlj{
  display: grid;
  grid-template-columns: 100px 1fr;
}
main .navs .xxlj .desc {
  padding: 16px 0;
  display: grid;
  place-items: center;
}
main .navs .xxlj .desc span {
  font-size: 12px;
  color: #999;
}
main .navs .xxlj .desc span {
  font-size: 12px;
  color: #999;
}
main .navs .xxlj .detail {
  display: flex;
  place-items: center;
  place-content: space-between;
  padding: 20px;
}
main .navs .xxlj .detail li {
  display: grid;
  grid-template-columns: 36px 85px;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 10px;
  place-items: center start;
}
main .navs .xxlj .detail img {
  width: 100%;
  grid-row: span 2;
}
main .navs .xxlj .detail li a {
  font-size: 14px;
}
main .navs .xxlj .detail li a:hover {
  color: red;
}
main .navs .xxlj .detail li span {
  font-size: 12px;
  color: #999;
}
main .navs .right .rigth-bottom .nav{
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: repeat(6,1fr);
  grid-auto-flow: column;
  place-items:  center;
  line-height: 13px;
  font-size: 12px;
}
main .navs .right .rigth-bottom .nav a:nth-of-type(7){
  background-color: red;
  color: white;
  border-radius: 0px;
}
main .navs .right .rigth-bottom .nav a{
  cursor: pointer;
}
main .navs .lxfs{
 display: grid;
 grid-template-columns: 1fr 1fr;
 place-items: center;
}
main .navs .lxfs .wxh{
  grid-area: 2;
}
main .navs .lxfs .wx,
main .navs .lxfs .qq{
  font-size: 1.5em;
}