【HTML+CSS】grid自适应网站布局之服务项目展示

一、前言：

最近在网上了解grid布局时，发现了很多有意思的知识点，所以简单的写了一个服务项目展示的grid自适应网站布局，用来回顾与加强grid布局的掌握，代码还是很简单的，初学者用来练手还是很合适滴。

本项目的源码和相关图片打包如下：

grid网站自适应布局链接:https://pan.baidu.com/s/1JIdUdvbu3Cxx9DN6Iy99Zw?pwd=1231 
提取码:1231复制这段内容打开「百度网盘APP 即可获取」
 

效果如下：

 

它可以根据界面的宽和高自适应的动态调整布局，这种界面还是比较常见的

 

二、全部代码展示

2.1、HTML代码

    
    
    
    
    


    
    

        
        
我们的服务
        
        

            
            

                
                
                
网络安全
                
Creating visually appealing designs for various purposes.
            
            

                
                
页面设计
                
Comprehensive insights from complex data sets.
            
            

                 
                
游戏开发
                
User-friendly interfaces for seamless experiences.
            
            

                
                
云端服务
                
Promoting products or services to target audiences.
            
            

                
                
图像处理
                
Accurate and organized financial management.
            
            

                
                
硬件维修
                
Streamlined processing for efficient payroll management.
            
            

                
                
售后处理
                
Reliable connections for seamless communication.
            
            

                
                
项目合作
                
Clean and modern layout with intuitive navigation and ample whitespace.
            
        
    
    
    
    

2.2、CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
}
.container {
    width: 100%;
    min-height: 100vh;
    padding: 0px 8%;
    position: relative;
}

/* 加这个的作用是使得只有背景图片的透明度发生改变，其他元素透明度不变 */
.container::after {
    content: "";
    background: url('./img/3.png') no-repeat center;
    opacity: .5;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
/* 设置主容器h1的样式 */
.container h1 {
    text-align: center;
    padding-top: 10%;
    margin-bottom: 60px;
    font-weight: 600;
    /* 将它设置为绝对定位 */
    position: relative;
}

/* 为主容器h1设置一个下滑线的效果 */
.container h1::after {
    content: "";
    background: linear-gradient(to right,red, orange 50%, yellow);
    width: 120px;
    height: 5px;
    position: absolute;
    bottom: -5%;
    left: 50%;
    /* 表示元素沿着x轴向左平移它自身长度的一半 */
    transform: translateX(-50%);
}

/* 这个是实现响应式布局的关键代码 */
.row {
    display: grid;
    /* 这是实现自适应的关键代码*/
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.server {
    text-align: center;
    padding: 25px 10px;
    border-radius: 5px;
    font-size: 18px;
    /* 将光标移动到该div上变为小手的样子 */
    cursor: pointer;
    /* 设置背景颜色为透明 */
    background: transparent;
    transition: transform 0.5s, background 0.5s;
}

.server i {
    font-size: 40px;
    margin-bottom: 15px;
    color: rgba(1, 1, 141, 0.883);
}
/* 设置每一个服务项标题的样式 */
.server h2 {
    font-weight: 600px;
    margin-bottom: 8px;
}

.server p {
    color: rgb(106, 106, 112);
}

/* 设置鼠标移动到上面的样式 */
.server:hover {
    background: rgb(1, 1, 141, 0.883);
    color: #fff;
    transform: scale(1.05);   
}

/* 设置鼠标移动到上面图标样式 */
.server:hover i {
    color: #fff;
}

/* /* 设置鼠标移动到上面p标签的样式 */
.server:hover p {
    color: rgb(242, 242, 166);
}

结语

CSS中.container::after选择器下的 【grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));】这是本项目实现自适应的核心代码，作用如下：

grid-template-columns 是 CSS Grid 布局中定义网格布局列的属性。该属性默认值为 none，必须使用grid-template-rows属性与其共同使用。该属性值可以使用像素、百分比、fr、auto等来表述网格布局列。repeat() 函数则可以简化这个列表并缩短我们的CSS。

repeat(auto-fit, minmax(250px, 1fr))表示网格布局的每一列都具有最小宽度为 250 像素，最大宽度为 1 个等分比例的宽度，而 auto-fit 的意思是根据自适应容器宽度去动态变化列数，在能够容纳一列的情况下尽可能多的叠加列，以上组合表达式表示列数自适应且不能小于 250 像素，且列宽最多等分容器的可用空间。它的效果就是，当网格容器宽度变化时，自动地增加或减少列数，以尽可能地填满网格容器的宽度，同时在每个列最小为 250px，最大等分当前可用宽的量下进行设置。