pc端常用的布局，grid布局的基本使用

原创已于 2025-02-20 00:12:16 修改

· 326 阅读

3 ·

版权

文章标签：

#前端 #html #css

于 2025-02-20 00:10:28 首次发布

在做pc端的时候有很多相似的场景，这里做一个大概的整理。核心使用css中的栅格布局grid和原生html。如果有合适的组件库，直接使用组件库更为方便。具体根据团队采用的技术栈和实际项目情况为准

pc端header模块

常见的header模块，通常左侧为logo，右侧为导航栏。注释这边直接写在代码上啦，这里就不赘述了。效果图如下：

 <div class="header">
        <div class="logo"><img src="../img/xp.png" alt=""></div>
        <div class="nav">
            <div class="navitem">首页</div>
            <div class="navitem"><span>关于我们</span>
                <div class="navitem-sub">
                    <div class="navitem-subitem">公司简介</div>
                    <div class="navitem-subitem">企业文化</div>
                    <div class="navitem-subitem">发展历程</div>
                </div>
            </div>
            <div class="navitem">产品中心</div>
            <div class="navitem">新闻中心</div>
            <div class="navitem">联系我们</div>
        </div>
    </div>

        .header{
            width: 800px;
            margin: 40px auto;
            border: 1px solid;
            /* 使用栅格布局必须先声明display:grid */
            display: grid;
            /* 采用 grid 布局，使用 grid-template-columns 属性设置列的宽度。
           auto 表示该列宽度会根据内容自动调整，一般用于放置占用空间较小的元素。
           右侧列设置固定宽度为 500px，通常可用于放置导航栏等元素。
           栅格布局会自动分配剩余空间，填充在各列之间 */
            grid-template-columns: auto 500px;  
            padding: 10px;
         
        }
        .header .logo{
            display: flex;
            /* 垂直居中 */
            align-items: center;
        }
        .logo img{
            /* 设置logo图标大小 */
            width: 30px;
            height: 30px;
            /* object-fit: contain; 保持图片比例 */
            object-fit: contain;
        }
        .nav{
            display: grid;
            /* 设置导航栏列表 fr代表等分 如果每个都设置相同值，则可以使用repeat(5,1fr)
            效果等同于grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            */
            grid-template-columns: repeat(5,1fr);
            align-items: center;
        }

当鼠标已经导航栏选项的时候，需要展示下拉框。这个场景在pc端出现也是很高的。效果图如下：

        .navitem{
            border: 1px solid;
            text-align: center;
            /* 父盒子相对定位 否则子盒子绝对定位不生效 */
            position: relative;
        }
        .navitem-sub{
            /* display: none; 隐藏 先把这个下拉框隐藏 */
            display: none;
            /* 使用绝对定位控制盒子位置 */
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            border: 1px solid;
        }
        /* 当鼠标移入时，显示下拉框 */
        .navitem:hover .navitem-sub{
            display: block;
        }

产品列表页面，一行多个效果

这里使用栅格布局可以轻松实现。相对于flex和传统浮动布局，个人感觉是简单了很多。这里以一行五个为例展示，效果图如下：

  <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>

       .box{
            display: grid;
            /* 一行几个则repeat第一个参数传几  当元素个数大于5时，会自动换行*/
            grid-template-columns: repeat(5,1fr);
            /*  gap 属性是一个简写属性，可同时设置行间距和列间距。
            如果只提供一个值，则行间距和列间距都将使用该值
            如果传两个值eg：gap: 20px 10px 表示行间距为 20px，列间距为 10px
            row-gap 属性专门用于设置网格行之间的间距
            column-gap 属性用于设置网格列之间的间距   
            */
            gap: 10px; 
            padding: 10px;
            width: 800px;
            margin: 100px auto;
            border: 1px solid;
        }
        .box  .item{
            border: 1px solid;
            text-align: center;
        }