Grid布局使用方法

简介: Grid布局使用方法

Grid布局就是网格布局


CSS网格布局是CSS中功能最强大的布局系统。它是一个二维系统,这意味着它既可以处理列又可以处理行


第一步:


首先先将父容器定义为网格容器,块级网格grid,或者定义为内联网格inline-grid;

  .container{
        display:grid | inline-grid;
    }

Grid网格布局的原理就是把一一块区域用行和列分割成几个小的区域,就像网格一样(或者理解为象棋棋盘的布局)


第二步:分割


在父容器内将区域分成几行和几列

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows:25% 100px auto;
}

column是列,将父容器分成5列,每列的宽度分别是40px,50px,自适应,50px,40px, row是行,每一行的高度是:占比父容器的25%,100px ,自适应剩下的

微信图片_20230106141236.png


第三步:使用


使用方式一:


这样就将网页分割成一个网格,有行和列,使用这些网格时就,按照从第几行到第几行;从第几列到第几列划分区域

比如说我想在红线区域设置轮播图 a

就是从第1行到第3三行;从第2列到第5列

微信图片_20230106141251.png

.a{
    grid-row-start:1;
    grid-row-end:3;
    grid-column-start:2;
    grid-column-end:5;
}

方法二:使用grid-template-area:


就是在父容器里给每个区域起一个名字,然后再指定给子盒子。

还以上边轮播图的案例:绿色的是名字

微信图片_20230106141302.png

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows:25% 100px auto;
    grid-template-area:
        "s img img img d"
        "m img img img d"
        "pic pic y  y  d";
}

这样就给每个方框起了名字,在使用时指定,所有名字为img的方框都成为了轮播图的区域,在里面放置图片,会铺满整个img框

.a{
    grid-are:img;
}

这只是粗略的用法,详细的可以看官网:css之Grid网格布局

也可以玩这个网格布局的小游戏:grid网格布局小游戏 可以帮助你快速地掌握grid网格布局

目录
相关文章
|
存储 Linux Go
基于MinIO搭建高性能文件服务器
基于MinIO搭建高性能文件服务器
1442 0
基于MinIO搭建高性能文件服务器
|
5月前
|
存储 jenkins 测试技术
Apipost自动化测试:零代码!3步搞定!
传统手动测试耗时低效且易遗漏,全球Top 10科技公司中90%已转向自动化测试。Apipost无需代码,三步实现全流程自动化测试,支持小白快速上手。功能涵盖接口测试、性能压测与数据驱动,并提供动态数据提取、CICD集成等优势,助力高效测试全场景覆盖。通过拖拽编排、一键CLI生成,无缝对接Jenkins、GitHub Actions,提升测试效率与准确性。
429 11
|
存储 安全 开发工具
GitHub 支持双因素认证(2FA)
【9月更文挑战第29天】
1506 6
|
前端开发 JavaScript 开发工具
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
本文介绍了一种将本地图片和静态资源(如 js、css、文档等)上传至免费CDN的方法,便于随时调用。具体步骤包括:在GitHub创建仓库`resources`存放资源;通过上传或Git命令同步文件;在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效,适合开发者快速部署和共享静态内容。
859 5
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
|
Ubuntu Linux 编译器
MinGW-w64在windows/ubuntu上的安装及使用
MinGW-w64在windows/ubuntu上的安装及使用
1604 0
|
10月前
|
存储 人工智能 供应链
区块链技术在金融领域的应用与挑战
区块链技术在金融领域的应用与挑战
518 0
|
11月前
|
数据采集 安全 自动驾驶
5G中的隐私保护机制:守护数字世界的安全与信任
5G中的隐私保护机制:守护数字世界的安全与信任
380 0
|
网络协议 安全 网络安全
OpenWRT配置SFTP远程文件传输,让数据分享更安全
OpenWRT配置SFTP远程文件传输,让数据分享更安全
367 0
|
机器学习/深度学习 传感器 算法
WOA-BP回归预测 | Matlab 鲸鱼优化算法优化BP神经网络回归预测
WOA-BP回归预测 | Matlab 鲸鱼优化算法优化BP神经网络回归预测