首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS 中的网格(grid)布局,是什么?

CSS 中的网格(grid)布局,是什么?

原创
作者头像
Learn-anything.cn
发布于 2021-12-10 10:07:59
发布于 2021-12-10 10:07:59
3.4K0
举报
文章被收录于专栏:learn-anything.cnlearn-anything.cn
一、网格布局是什么?

网格布局就是把页面拆分成很多小格子,用于对齐和摆放元素。有三个重要的属性:行(row)、列(column)、沟槽(gutter,表示行列的间隙)。


二、怎么使用?
代码语言:txt
AI代码解释
复制
/* 父元素设置 如下 属性 */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;

更多可用的 grid 属性,看这里!


三、实例

新建 index.html 文件,复制下面代码到文件,用浏览器打开 index.html,再调整浏览器窗口大小,可以看到元素大小也会随之变化。

代码语言:txt
AI代码解释
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Grid starting point</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            font: .9em/1.2 Arial, Helvetica, sans-serif;
        }

        .container>div {
            border-radius: 5px;
            padding: 10px;
            background-color: rgb(207, 232, 220);
            border: 2px solid rgb(79, 185, 227);
        }

        .container {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            grid-gap: 20px;
        }
    </style>
</head>

<body>
    <h1>Simple grid example</h1>

    <div class="container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
    </div>

</body>

</html>

四、参考文档

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
鼓吹还是唱衰:消费级机器人该如何破局?
当今的科技浪潮,AI和机器人是无论如何绕不过的。 AI在消费端,落地成了智能音箱。机器人在消费端,最先涌现的,就是家庭机器人。机器人固然比音箱更具科技感,但它却存在极端的认知偏差、概念混用和产品混杂。局外人雾里看花,局内人方知冷暖。 # 正本清源:一个爆发的万亿市场? 概念界定:什么是消费机器人 当我们在谈论机器人,我们究竟在谈论什么?从最顶端的用途划分,可以有军用机器人、工业机器人、商用机器人和消费机器人。我们在这里探讨的是2C端的消费机器人。理论上,消费机器人按场景可以有家庭场景、随身
机器人网
2018/04/25
8850
鼓吹还是唱衰:消费级机器人该如何破局?
浅析:智能家居缘何不温不火?
近日,欧洲最大软件商 SAP 决定拨款20亿欧元的专款投资物联网,用于投资开发从家居到汽车的智能化互联网接入设备。在这其中,智能家居应该算是当前发展速度较快的那一个领域,但是,作为一个需求庞大的国家,中国的智能家具产业却一直处在不温不火的状态。这其中的问题到底出在哪里? 中国智能家居还处于萌芽 我国人口基数巨大,也就意味着对于智能硬件有着很大的需求,而这其中包括了智能家居硬件产品。根据前瞻产业研究院提供的《中国智能家居设备行业发展前景预测与投资机会分析报告》指出,2012年我国智能家居市场规模为1022.2
镁客网
2018/05/28
6960
清洁机器人跻身618“顶流”,服务成未来新趋势
刚刚结束的618被称为“史上最难的一届”。虽然行业不景气,但依然不乏亮点品类,比如高速增长的清洁机器人。苏宁数据显示618其门店扫地机器人销售同比增长 165%。京东家电618开门红(5月31日晚8点起)战报则显示自清洁扫地机器人10分钟成交额超去年全月,4小时成交额同比增长超400%。 实际上,清洁机器人的逆势增长已延续一段时间。奥维云网(AVC)推总数据显示,2021 年清洁电器产品国内市场全渠道销售额达 309.4 亿元人民币,较上年增长 28.9%,其中具备扫吸拖一体功能的智能洗地机市场在 2020
罗超频道
2022/07/12
6920
清洁机器人跻身618“顶流”,服务成未来新趋势
添可、追觅洗地机异军突起,家庭清洁赛道变天了?
在“懒人经济”风潮下,这几年智能清洁赛道日渐火热,据奥维云网数据显示,仅2021年国内清洁电器规模就同比增长了29%,达到309亿元;2022年清洁电器行业全品类零售额达322亿元,同比增长4%。据悉,目前清洁电器领域比较受欢迎的产品主要有吸尘器、扫地机器人、蒸汽拖把、除螨仪、擦窗机器人,以及洗地机等。
刘旷
2023/04/07
6040
机器人市场爆发!但决定机器人优劣的却是电机电源
目前,全球机器人行业进行得热火朝天,从工业机器人到服务机器人,其增长速度都令人咂舌。今年1-10月我国工业机器人产量已经突破十万,服务机器人也呈现出欣欣向荣之态。机器人属于精密机器,其对组件的要求非常高,而电机电源更是在机器人中起着至关重要的作用。 国内工业机器人产量破10万 近几年,随着我国人口红利的消失,自动化、智能化成了众多传统制造业转型的方向,国内有许多企业已经开始使用机器人进行生产制造,工业机器人的需求也因此不断攀升。 金升阳营销总监张红军就曾表示:“当下,智能制造已成为主流。为提升生产效率和控制
企鹅号小编
2018/01/26
7710
智能家居如火如荼,各玩家的第一步棋都下在哪里?
要进入一个领域,选择一个好的切入点是件很严肃的问题。 家庭服务机器人、智能音箱、智能电视……伴随着人工智能技术的提升以及市场的扩大,一些智能设备逐渐进入人们的家居生活中,在便利之外,也带来了一丝乐趣。 据前瞻产业研究院此前发布的《中国智能家居设备行业市场前瞻与投资策略规划报告》数据显示,2016年,我国智能家居市场规模达605.7亿元,同比增长率50.15%。预计未来几年内智能家居将迎来爆发,到2018年,智能家居市场规模将达1396亿元。另外,来自科尔尼管理咨询公司的最新报告预计,到2020年全球智能家居
镁客网
2018/05/29
4210
工信部:2020年智能家庭服务机器人实现批量生产及应用
原标题:我国将加快智能家庭服务机器人研发应用 新华社北京12月18日电(记者张辛欣)记者18日从工信部获悉,工信部将在今后三年大力推进人工智能核心技术和标志性产品取得重大突破,智能家庭服务机器人是重点。到2020年,智能家庭服务机器人实现批量生产及应用,医疗康复、助老助残等机器人实现样机生产。 人工智能对社会的改变,往往从身边开始。随着传感、数据技术的突破,一系列智能家庭服务机器人相继问世,便捷了百姓生活。 点击手机屏幕远程操控,扫地机器人可自主打扫清理。基于无人驾驶的传感等技术,360扫地机器人可绘制室内
企鹅号小编
2018/02/12
6950
机器人步入3.0时代:科沃斯靠什么继续称霸扫地机江湖?
去年科沃斯举办的一场新品发布会上,科沃斯机器人CEO宣布“科沃斯开启了家用服务机器人的 3.0 时代”,即机器人在功能性、智能性、交互性三方面进行了升级;今年3月,科沃斯又带来一款重磅新品沁宝Z1空气净化器机器人,除开净化空气外,它还可以做到人机交互、视频管家与对讲功能,完全能满足用户在线撸猫、带娃的需求。
用户2908108
2022/09/03
4430
机器人步入3.0时代:科沃斯靠什么继续称霸扫地机江湖?
[独家] 居安思危:iRobot利用风投开拓全新机器人市场
尽管竞争对手众多,但iRobot目前仍是全球机器人真空吸尘器领域的绝对霸主。自从2002年Roomba推出市场以来,iRobot已经卖出了超过1300万台产品,并且目前仍以21.8%的复合增长率在扩张。据统计,Roomba占据了83%的北美市场、62%的欧洲及中东市场以及67%的亚太市场。iRobot已经开创了一个良好的开局,但危险已经在临近,iRobot能否继续保持其霸主地位? 地毯上的战争 消费电子巨头三星、LG和松下以及真空吸尘器大王戴森都已经加入了这场地毯上的战争,并开始争抢扫地机器人市场。
机器人网
2018/04/13
6430
[独家] 居安思危:iRobot利用风投开拓全新机器人市场
科沃斯开启家用服务机器人行业3.0时代:用“技术”撬动增长飞轮
今年扫地机器人赛道延续了自去年以来的火热,AVC数据显示,2021年上半年,扫地机器人零售规模为53亿元,同比增长39%。零售量280万台,同比增长了2%。
用户2908108
2021/10/08
3340
机器人能帮我们干掉哪些家务?
---- 导语:随着科技的发展,简单的机器人已经来到我们的生活中,比如机器人型真空吸尘器或是具有一定人工智能的沟通型家庭机器人。但显然,与科幻电影中无所不能的机器人们相比,现实还是拥有一定差距。那么,
机器人网
2018/04/19
6390
机器人能帮我们干掉哪些家务?
扫地机高增长神话破灭!科沃斯、石头科技艰难 “破冰”!
先是,老牌研发商广东宝乐机器人宣布破产重整;曾获得腾讯和红杉资本大额融资,并邀请罗永浩代言的“追光”品牌,也在短短两年内宣告失败。就连雷军投资、小米生态链孵化的睿米科技,也发布了停止运营的通告。
刘旷
2025/02/11
850
智能家居发展困境怎么破?附硬核技术
所谓的智能家居,是以住宅为平台,利用综合布线技术、网络通信技术、安全防范技术、自动控制技术、音视频技术,将家居生活相关的设备集成起来,构建可集中管理、智能控制的住宅设施管理系统,从而提升家居的安全性、便利性、舒适性、艺术性,并实现环保节能的居住环境。
火爆的小茶壶
2022/08/23
4480
智能家居发展困境怎么破?附硬核技术
“扫地茅”一路狂飙,扫地机器人下半场竞争焦点是什么?
原创丨作者:罗超 1996年瑞典家电巨头伊莱克斯 Electrolux 推出首台扫地机器人“三叶虫”。奢侈级定价、过于“人工智障”,让“三叶虫”被外界评为“工业垃圾”,但也正是由此开始,一波又一波企业在接下来的数十年里围绕着清洁机器人赛道前赴后继,绞尽脑汁地让机器更好地助力人类清扫地面。 (伊莱克斯三叶虫扫地机器人) 前些年扫地机器人的主场玩家是戴森、iRobot等国外品牌,近年来中国品牌依托产业链红利,趁势抓住AI、IoT等新技术浪潮,成为新晋主力玩家。市场出现了扫拖一体清洁机器人这样的大热品类,也涌现
罗超频道
2022/09/06
4610
“扫地茅”一路狂飙,扫地机器人下半场竞争焦点是什么?
扫地机器人鏖战双十一,科沃斯再显行业统治力
双十一在进入到14个年头后,终于激情不再。从双十一开始前品牌宣传的减少、到双十一当天“晚会”的缺席、再到双十一过后“战报”不再发布。与多年前“全民狂欢”的景象相比,今年的“冷清”多少还是有点让人始料未及。
用户2908108
2022/12/18
8890
扫地机器人鏖战双十一,科沃斯再显行业统治力
INDEMIND:瞄准赛道下半场,加码扫地机器人视觉导航
近年来,随着技术的成熟与需求的催化,扫地机器人不断“攻城略地”,逐渐成为年轻消费群体的家庭清洁工具首选。据中怡康数据显示,2013年-2018年,我国国内市场扫地机器人销售量由57万台激增至577万台,销售额由8亿元增长至86.6亿元,双双取得超过10倍增长。
INDEMIND
2020/01/09
5960
INDEMIND:瞄准赛道下半场,加码扫地机器人视觉导航
谁是智能家居的未来:物联网or机器人?
高科技产业再次走到一个岔路口:对于未来的智能家居,我们需要一台中央计算机,告诉我们什么时候擦地板,什么时候清洁窗户和煮早餐?还是需要一台全能型机器人,帮助我们完成这些家务活。这也是说,我们的生活会出现
机器人网
2018/04/13
9170
谁是智能家居的未来:物联网or机器人?
从单一到融合,扫地机器人导航技术的“最优解”?
人工智能浪潮下,智能家居产品层出不穷,但纵观行业发展能真正走入家庭中的产品屈指可数,而扫地机器人却是其中的“网红产品”。
全栈程序员站长
2022/09/02
5910
拥挤的吸尘器赛道,国产品牌能否弯道超车
受AIoT、智能家居风口刺激,小家电赛道这些年越来越火。根据前瞻产业研究院发布的报告,2012年至2019年小家电市场规模复合增长率达到13.3%。
刘旷
2021/03/19
3620
「深度」想当有实体的“贾维斯”,智能家居机器人还需跨越多个桎梏
去年,易观智库曾经发布过一篇关于中国智能家居市场的专题研究报告,分析认为至2018年,随着智能家居从基础建设(包括系统及大数据平台)到中端硬件的完善,智能家居产品将被消费市场接受,市场规模将达1800亿元人民币。而根据另一份有关媒体发布的报告,虽然2016年国内已有12家企业融资过亿,且总体融资数额达到26.6亿元,实际上,在2016年下半年,至今可查的较大笔融资仅欧瑞博一例,资本明显遇冷。将两份数据进行对比,纵然相关人工智能技术正渐渐完善,也依然阻挡不了人们对智能家居市场的不看好,更遑论伴随的还有资本的遇
镁客网
2018/05/29
5900
推荐阅读
相关推荐
鼓吹还是唱衰:消费级机器人该如何破局?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档