CSS栅格系统

栅格系统

响应式设计

在谈论栅格系统之前,我们先了解一下,响应式设计。简单来说,我们在设计的页面的时候,并不知道我们的页面会在什么设备呈现,为了在不同的设备上有最好的呈现效果,我们需要作出一些响应和调整。

响应式 Web 设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境

(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

栅格系统

为了能够更好的使用响应式设计,栅格系统应运而生。通过栅格系统,可以在切分的网格里按顺序叠加不同的宽度,并且易于管理。这样做的好处是显而易见的:

  • 提高生产力,通过在网格的划分,元素更容易堆放而且在跨浏览器上面具有一致性,使我们可以专心的注意布局而不是兼容上。
  • 具有灵活性,无论是什么样的布局,都可以拆分到粒度为一个网格的大小。
  • 支持响应式设计,栅格系统本身能很好的和响应式设计结合在一起,或者说,我们的栅格系统是基于响应式设计的。

理解

![avatar][img1]

兼容性

![avatar][img2]

划分行列

<article><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div><div id="div6"></div><div id="div7"></div><div id="div8"></div><div id="div9"></div><div id="div10"></div>
</article>
<style type="text/css">article{/*内容标签*/width: 400px;height: 200px;border: orange 5px solid;display: grid;/*设置为块级网格 (栅格)*//*display: inline-grid;设置为行级网格(栅格)*//*----------固定像素----------------grid-template-rows:150px 50px;grid-template-columns: 80px 120px 40px 80px 80px;----------百分比----------------grid-template-rows:50% 50%;grid-template-columns:20% 20% 20% 20% 20%;----------重复设置----------------	使用repeat统一设置值,第一个参数为重复数量,第二个参数是重复值grid-template-rows:repeat(2,50%);grid-template-columns: repeat(5,20%);grid-template-rows:repeat(1,30% 70%);grid-template-columns: repeat(3,30px 40px);----------自动填充----------------grid-template-rows:repeat(auto-fill,100px);grid-template-columns: repeat(auto-fill,80px);----------比例划分----------------使用 fr单位设置元素在空间中所占的比例单位组合grid-template-rows: 1fr 2fr;grid-template-columns: 1fr 1fr 2fr 3fr 3fr;重复定义grid-template-rows:repeat(2,1fr);grid-template-columns: repeat(3, 1fr 2fr);----------组合定义----------------	分别定义行和列grid-template: repeat(2,1fr) / repeat(5,1fr);----------minmax----------------使用minmax方法可以设置取值范围,下列在行高在最小100px ~ 最大200px间取值。(可把行高调节来做实验)grid-template-rows: 100px minmax(100px, 200px);*/grid-template: repeat(2,1fr) / repeat(5,1fr);}div{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;/*背景被裁剪到内容框*/}
</style>

间距定义

<article><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div><div id="div6"></div><div id="div7"></div><div id="div8"></div><div id="div9"></div><div id="div10"></div>
</article><style type="text/css">article{/*内容标签*/width: 400px;height: 200px;border: orange 5px solid;display: grid;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(5,1fr);/*row-gap:10px;设置行间距column-gap:10px;设置列间距组合定义:设置行列间距为20px与10pxgap:20px 10px;*/	gap:20px 10px;}div{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;/*背景被裁剪到内容框*/}
</style>

栅格命名

概念

栅格线可以使用命名与编号找到,方便控制指定栅格,或将内容添加到指定栅格中。

![avatar][img3]

独立命名

可以为每个栅格独立命名来进行调用

grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
自动命名

对于重复设置的栅格系统会自动命名,自动生成r-start1、r-start2…

grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-columns: repeat(3, [c-start] 100px [c-end]);

元素定位

选项说明
grid-row-start行开始栅格线
grid-row-end行结束栅格线
grid-column-start列开始栅格线
grid-column-end列结束栅格线
根据栅格命名定位
<article><div id="div1">
</article>
<style type="text/css">article{width: 300px;height: 300px;border: orange 5px solid;display: grid;/*可以为每个栅格独立命名来进行调用*/grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];}#div1{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;/*给div设置栅格位置*/grid-row-start:r2-start;grid-column-start: c2-start;grid-row-end: r2-end;grid-column-end: c2-end;}
</style>
根据自动命名定位
<style type="text/css">article{width: 300px;height: 300px;border: orange 5px solid;display: grid;/*对于重复设置的栅格系统会自动命名*/grid-template-rows: repeat(3, [r-start] 100px [r-end]);grid-template-columns: repeat(3, [c-start] 100px [c-end]);}#div1{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;/*给div设置栅格位置*/grid-row-start:r-start 2;grid-column-start: c-start 2;grid-row-end: r-end 2;grid-column-end: c-end 2;}
</style>
根据栅格线定位
<style type="text/css">article{width: 300px;height: 300px;border: orange 5px solid;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);}#div1{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;/*给div设置栅格位置通过设置具体的第几条栅格线来设置区域位置,设置的数值可以是正数和负数*/grid-row-start: 2;grid-column-start: 2;grid-row-end: 3;grid-column-end: 3;  }
</style>
根据偏移量定位
<style type="text/css">article{/*内容标签*/width: 300px;height: 300px;border: orange 5px solid;display: grid;/*设置为块级网格 (栅格)*/grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);}#div1{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;grid-row-start: 2;grid-column-start: 2;grid-row-end: span 2;/*在grid-row-start的基础上偏移2位*/grid-column-end: span 2;/*在grid-column-start的基础上偏移2位*/}
</style>
简写模式
<style type="text/css">article{/*内容标签*/width: 300px;height: 300px;border: orange 5px solid;display: grid;/*设置为块级网格 (栅格)*/grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);}#div1{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;/*简写模式1:grid-row: 2/4;grid-column: 2/4;简写模式2 grid-area:更加简洁是同时对 grid-row 与 grid-column 属性的组合声明语法结构如下:grid-row-start/grid-column-start/grid-row-end/grid-column-endgrid-area:2/2/4/4;*/grid-area:2/2/4/4;}
</style>

对齐方式

选项说明对象
align-items栅格内所有元素的垂直排列方式栅格容器
justify-items栅格内所有元素的横向排列方式栅格容器
justify-content所有栅格在容器中的水平对齐方式,容器有额外空间时栅格容器
align-content所有栅格在容器中的垂直对齐方式,容器有额外空间时栅格容器
align-self元素在栅格中垂直对齐方式栅格元素
justify-self元素在栅格中水平对齐方式栅格元素
<article><div id="div1">1</div><div id="div2">2</div><div id="div3">3</div><div id="div4">4</div>
</article>
<style type="text/css">article{width: 300px;height: 300px;border: orange 5px solid;display: grid;grid-template-rows: repeat(2, 150px);grid-template-columns: repeat(2, 150px);align-items: center;/*栅格内所有元素的垂直排列方式-居中*/justify-items: center;/*栅格内所有元素的横向排列方式-居中*/ }div{width: 50px;height: 50px;border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;}#div1{align-self: flex-end;/*元素在栅格中垂直对齐方式*/	justify-self: flex-end;/*元素在栅格中横向对齐方式*/	}#div2{align-self: flex-end;	justify-self: flex-start;}#div3{align-self: flex-start;	justify-self: flex-end;}
</style>
<style type="text/css">article{width: 300px;height: 300px;border: orange 5px solid;display: grid;grid-template-rows: repeat(2, 100px);grid-template-columns: repeat(2, 100px);/*所有栅格在容器中的水平对齐方式,容器有额外空间时 -- 平均分割*/justify-content: space-between;/*所有栅格在容器中的垂直对齐方式,容器有额外空间时 -- 平均分割*/align-content: space-evenly;}div{width: 50px;height: 50px;border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;}
</style>

栅格流动

在容器中设置grid-auto-flow属性可以改变单元流动方式。

选项说明
column按列排序
row按行排列
<article><div id="div1">1</div><div id="div2">2</div><div id="div3">3</div><div id="div4">4</div>
</article>
<style type="text/css">article{width: 300px;height: 300px;border: orange 5px solid;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2, 1fr);grid-auto-flow:column;/*内容排序流动*/}div{border: green 1px solid; padding: 10px;background-color: #6610F2;background-clip: content-box;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于鲲鹏服务器搭建简单的开源论坛系统(LAMP)实践分享

LAMPLinux apache mysql( mariadb) PHP 结合利用华为云弹性负载均衡ELB弹性伸缩AS服务 优点&#xff1a; 将访问流量自动分发到多台云服务器&#xff0c;扩展应用系统对外的服务能力&#xff0c;实现更高水平的应用容错&#xff1b; 根据不同的业务、访问需求和预设策略&…

头歌数据结构与算法课程设计中 - 迷宫问题

给定一个迷宫&#xff0c;给出起点和终点&#xff0c;找出从起点出发到终点的有效可行路径&#xff0c;并求出长度。迷宫可以用二维数组A来存储表示。0表示通路&#xff0c;1表示障碍。此处规定移动可以从上、下、左、右四个方向移动。坐标以行下标和列下标表示&#xff0c;均从…

flask-slqalchemy使用详解

目录 1、flask-sqlalchemy 1.1、flask_sqlalchemy 与sqlalchemy 的关系 1.1.1、 基本定义与用途 1.2、flask_sqlalchemy 的使用 1.2.1、安装相关的库 1.2.2、项目准备 1.2.3、创建ORM模型 1.2.3.1、使用db.create_all()创建表的示例 1.2.3.2、创建多表关联ORM模型 1.…

【ETAS CP AUTOSAR基础软件】EcuM模块详解

文章包含了AUTOSAR基础软件&#xff08;BSW&#xff09;中EcuM模块相关的内容详解。本文从AUTOSAR规范解析&#xff0c;ISOLAR-AB配置以及模块相关代码分析三个维度来帮读者清晰的认识和了解EcuM。文中涉及的SOLAR-AB配置以及模块相关代码都是依托于ETAS提供的工具链来配置与生…

语音群呼之语音导航的应用

在数字化时代&#xff0c;语音群呼技术已成为企业、组织和个人高效沟通的重要工具。语音群呼不仅能够快速地将信息传递给目标群体&#xff0c;而且通过语音导航功能&#xff0c;还能确保信息传达的准确性和用户体验的优质性。本文将深入探讨语音群呼的语音导航功能&#xff0c;…

【数据结构与算法】算法优化、时间复杂度、空间复杂度

文章目录 一、什么是复杂度&#xff1f;二、大O表示法三、时间复杂度计算四、常见复杂度的比较五、算法优化的核心方法论六、常见算法复杂度五、总结 一、什么是复杂度&#xff1f; 复杂度是衡量代码运行效率的重要的度量因素。 而复杂度主要就是指时间复杂度和空间复杂度。 …

算法思想总结:哈希表

一、哈希表剖析 1、哈希表底层&#xff1a;通过对C的学习&#xff0c;我们知道STL中哈希表底层是用的链地址法封装的开散列。 2、哈希表作用&#xff1a;存储数据的容器&#xff0c;插入、删除、搜索的时间复杂度都是O&#xff08;1&#xff09;&#xff0c;无序。 3、什么时…

低功耗蓝牙模块在便携式医疗设备上的应用前景

随着科技的不断发展&#xff0c;医疗设备的便携性和智能化已经成为了一种趋势。在这个背景下&#xff0c;低功耗蓝牙模块(Bluetooth Low Energy,简称BLE)作为一种先进的无线通信技术&#xff0c;正逐渐在便携式医疗设备中发挥着越来越重要的作用。本文美迅物联网MesoonRF将探讨…

TiKV学习5:TiDB SQL执行流程

目录 1. DML语句读流程概要 2. DML语句写流程概要 3. DDL 流程概要 4. SQL的Parse和Compile 5. 读取的执行 6. 写入的执行 7. DDL的执行 8. 小结 1. DML语句读流程概要 TiDB Server接收sql并处理&#xff0c;TiKV负责持久化数据&#xff0c;PD提供TSO和Region的数据字典…

keep-alive的应用和底层实现原理的探索

一、概念 keep-alive 是 Vue.js 中的一个内置组件&#xff0c;它用于缓存组件的状态或避免对组件进行多次销毁和重建。通过使用 keep-alive 组件&#xff0c;可以在组件切换时将状态保留在内存中&#xff0c;以便在下次需要时直接复用&#xff0c;从而提高性能并改善用户体验。…

HackTheBox-Machines--Bashed

Bashed 测试过程 1 信息收集 NMAP 80 端口 目录扫描 http://10.129.155.171/dev/phpbash.min.php http://10.129.155.171/dev/phpbash.php 半交互式 shell 转向 交互式shell python -c import socket,subprocess,os;ssocket.socket(socket.AF_INET,socket.SOCK_STREAM);s.co…

代码随想录算法训练营第38天 | 509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

代码随想录算法训练营第38天 | 509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯 理论基础自己看到题目的第一想法看完代码随想录之后的想法 链接: 509. 斐波那契数 链接: 70. 爬楼梯 链接: 746. 使用最小花费爬楼梯 理论基础 五部曲&#xff1a; 1.确定dp数组&#xf…

优化CPU占用率及内存占用2

在标准化无线通信板时&#xff0c;关注过程序占用ram的问题&#xff0c;当时 发现每一个线程都会分配8M栈空间&#xff0c;这次换rk3568后&#xff0c;偶尔看了下RAM占用&#xff0c;吓了一跳&#xff0c;不但每个线程有8M栈空间&#xff0c;几乎每个线程都占用了64MB的一个RAM…

AOP进阶

黑马程序员JavaWeb开发教程 文章目录 一、通知类型1.1 通知类型1.2 注意事项1.3 PointCut 二、通知顺序2.1 执行顺序 三、切入点表达式3.1 切入点表达式3.2 切入点表达式-execution3.2 切入点表达式- annotation 四、连接点4.1 连接点 一、通知类型 1.1 通知类型 Around&…

浩江星灿面试(c++)

量化工程师&#xff1a;提供实时的数据&#xff0c;为炒股提供依据&#xff1b;稳定&#xff0c;快&#xff0c;准确&#xff1b; 对于性能的要求比较高&#xff1b; 文章目录 题目一、延迟最低的IPC(Inter-Process Communication)通信方式是什么&#xff1f;题目二、找出下面…

部署专属网页版ChatGPT-Next-Web

背景 工作学习中经常使用chat-gpt, 需求是多端使用gpt问答&#xff0c;因此搭建一个网页版本方便多个平台使用。最后选择了 ChatGPT-Next-Web 部署说明 一键部署自己的web页面&#xff0c;因为是使用免费的vercel托管的&#xff0c;vercel节点在全球都有&#xff0c;理论上突…

【YOLOv8改进[Conv]】使用YOLOv9中的Adown模块改进Conv模块的实践 + 含全部代码和修改方式 + 有效涨点

本文中进行使用YOLOv9中的Adown模块改进Conv模块的实践 ,文中包含全部代码和修改方式 ,有效涨点。 目录 一 YOLOv9 1 信息丢失问题 2 PGI ① 信息瓶颈 ② 可逆函数<

oracle 12c DB卸载流程

1.运行卸载程序 [rootprimary1 ~]# su - oracle [oracleprimary1 ~]$ cd $ORACLE_HOME/deinstall [oracleprimary1 deinstall]$ ./deinstall Checking for required files and bootstrapping ... Please wait ... 这里选择3 、回车、y、y、回车、ASM 这里输入y 2.删除相关目录…

Midjourney应用:电商模特换装

今天我们应用的是Midjourney应用&#xff1a;电商模特换装 网上找到一件衣服&#xff0c;没有模特 方法一&#xff1a;两图片融合&#xff0c;BLEND命令&#xff0c;效果不是很理想失真 方法二&#xff1a;服装图片垫图说明细节缺失https://cdn.discordapp.com/attachments/1…

Iphone自动化指令每隔固定天数打开闹钟关闭闹钟(一)

注意&#xff1a;因为是第一次用iphone的快捷指令&#xff0c;不是很明白&#xff0c;所以之后多次运行发现有bug&#xff0c;所以快捷指令部分在下一章重新写&#xff0c;我用两个日期测试了&#xff0c;没问题&#xff0c;这一章可以当做熟悉快捷指令的一些操作用&#xff0c…