当前位置: 首页 > news >正文

【前端夯实基础】-grid布局

grid布局

网格布局,顾名思义,方方正正的格子都用它布局😊

常见属性

网格容器属性:grid,grid-template-columns,grid-auto-rows,gap...

网格子元素属性:grid-row,grid-column,grid-area

属性 解释 人话
grid 更改容器的流布局为网格 容器切换到网格布局模式
grid-template-columns 网格中列的总数量 竖着一共排几列
grid-template-rows 网格中行的总数量 横着一共排几行
grid-auto-rows 预设网格每行的高度 容器的每行多高【未设置总行数时生效】
grid-auto-columns 预设网格每列的宽度 容器的每列多宽【未设置总列数时生效】
grid-template-areas 预设网格每一个子元素位置 手动一个一个排网格项【必须是矩形】
grid-area 网格元素按网格行线设置大小时使用的名字 给网格每个子元素起个名字【配合grid-template-areas用的】
grid-row 网格元素按网格行线设置大小 指定定网格元素具体占几行【类似表格纵向合并】
grid-column 网格元素按网格列线设置大小 指定定网格元素具体占几列【类似表格横向合并】

布局方案

使用grid布局的三个常见场景,掌握以下三个即可掌握grid布局【重要‼️‼️

  • 方正无缺、大小相同:

    直接设置grid-template-columns【见:九宫格方案】

  • 方正无缺、大小不同:

    类似表格合并,设置grid-row、grid-column【见:网格线方案】

  • 不正有缺、大小不同:

    排列无规律,且有缺角。设置grid-template-areas【见:网格区域方案】

常见用法

一、九宫格

    <div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div><div class="box box6">6</div><div class="box box4">7</div><div class="box box5">8</div><div class="box box6">9</div></div>
.box{outline: 1px solid #000;}.container{display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;grid-auto-rows: 100px;}

二、三栏布局

  1. 网格线方案
    <div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
    .box{outline: 1px solid #000;}.container{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(10, 50px);gap: 20px;}.box1{grid-column: 1 / -1;}.box2{/* 不设置总行数无法使用-1 */grid-row: 2 / -1; }.box3{grid-column: 2 / -1;grid-row: 2 / -1;}
  1. 网格区域方案
    <div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
    .box{outline: 1px solid #000;}.container{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 150px);gap: 20px;/* 三行两列 */grid-template-areas: 'a a a''b c c''b c c';}.box1{grid-area: a;}.box2{grid-area: b;}.box3{grid-area: c;}

详情参考:CSS布局网格

http://www.sczhlp.com/news/7466/

相关文章:

  • CF1401E Divide Square
  • python用海伦公式计算三角形阴影面积
  • 阿里云可观测 2025 年 7 月产品动态
  • apache 和nginx 的区别,原理以及各自的优缺点?
  • 国产大模型Qwen3-32B完全本地化实战:LangChain + vLLM 构建企业级智能体核心引擎
  • Arrow_Flight_SQL——GizmoSQL_sqlflite
  • Elasticsearch Enterprise 8.19 (macOS, Linux, Windows) - 分布式搜索和分析引擎
  • Crypto 2025 s Accepted papers
  • Metasploit Pro 4.22.8-2025080401 (Linux, Windows) - 专业渗透测试框架
  • AI编程革命:Claude Opus 4.1全方位解读,国内用户API专享攻略
  • JetBrains Rider 2025.1安装教程详解:从下载到激活全流程
  • Android 隐藏软键盘新方案
  • 单片机充电的时候电池电压会被拉高,如何检测电压? - 指南
  • 《ESP32-S3使用指南—IDF版 V1.6》第三十二章 IIC_QMA6100P实验
  • vue-tools安装
  • 如何实现 AI Agent 自主发现和使用 MCP 服务 —— Nacos MCP Router 部署最佳实践
  • Fragment之vue和react
  • MyBatis-Plus高级用法:最优化持久层开发
  • go goland idea 开发工具如何格式化 proto 代码
  • go 语言基础
  • 【Vulnhub】DevGuru: 1 靶机练习
  • 倒序输出
  • Token是如何保证安全不被篡改
  • 预算有限也能高效运维?ManageEngine卓豪高性价比解决方案
  • 56个测试的基准函数,用于智能算法测试所用
  • [CTS2023] 琪露诺的符卡交换
  • liblib蜜汁优化 - sherlock
  • 【LeetCode 102】算法:二叉树的层序遍历
  • 代码随想录算法训练营第二天(数组篇)|Leetcode209长度最小的子数组,Leetcode59螺旋矩阵II,代码随想录区间和,代码随想录开发商购买土地
  • WebStorm转VSCode:高效迁移指南 - 教程