首页 > css教程 > 正文

css栅格布局GRID教程

原创 2017-12-06 14:03:37 0 143
Grid,真的布局神器。Css在引入Flex布局和Grid布局两个模块后,才真正有了布局的概念。最初的table布局不知道是神马鬼,再到 float 满天飞,可能还要使用abosulte来实现页面的布局。总之,实现起来特别别扭,要时刻注意:我这么写会不会塌陷,会不会给后面的元素造成影响,尼玛为啥还串位了。笔者斗胆的称这些实现为布局trick,Flex和Grid才是真的布。局。Flex负责一维布局,Grid负责二维布局,两个布局都非常强大,但是一个比一个难,属性多到想吐血,谁让人家牛逼是模块而不是属性呢。今天我们只围绕下图来介绍Grid布局相关概念

网格容器

Grid布局开始的地方,grid模块的承载体。外部看来就是个也可能是inline-block块,容器内部一个格一个格的。和 Flex 布局一样,它也分容器属性和项目属性。

网格线

网格线有横线和纵线,纵横交错的线就将网格容器切割成了最小的单元单元格。网格线是有编号的,从数字1开始编号。上图中有6条横线和6条纵线。如果你喜欢也可以给线起名字,一根线还能有多个名字。

单元格

Grid Cell 图中绿色背景的块就是单元格,网格布局的最小计量单位,该容器一共有25个单元格。

网格轨道

两条相邻的网格线中间部分就是轨道,为啥要有轨道的概念呢?因为需要设定轨道的宽度,如果将宽高单独的设置到单元格上那很可能变成了瀑布流复杂程度嗖嗖地上升。再看看上图的浅蓝色和浅粉色轨道感受一下。

网格区域

网格线、单元格、和轨道存在的意义就是将容器划分出你所需要的区域Grid Area。区域是可包含多个单元格的一个整块,那么如何划分呢?两条横的网格线和两条纵的网格线交叉的部分就是区域了。将容器合理的划分出多个区域,那么布局目的也达到了。区域是可以重叠的,所以它是有 z-index。

今天的概念部分就介绍到这里。后续会详细的介绍 grid布局编程相关的知识。
ps: 图片摘抄于CSS Grid布局:什么是网格布局

姊妹篇 深入理解布局神器 flexbox


Grid,真的布局神器。Css在引入Flex布局和Grid布局两个模块后,才真正有了布局的概念。最初的table布局不知道是神马鬼,再到 float 满天飞,可能还要使用abosulte来实现页面的布局。总之,实现起来特别别扭,要时刻注意:我这么写会不会塌陷,会不会给后面的元素造成影响,尼玛为啥还串位了。笔者斗胆的称这些实现为布局trick,Flex和Grid才是真的布局。Flex负责一维布局,Grid负责二维布局,两个布局都非常强大,但是一个比一个难,属性多到想吐血,谁让人家牛逼是模块而不是属性呢。今天我们只围绕下图来介绍Grid布局相关概念。

网格容器

Grid布局开始的地方,grid模块的承载体。外部看来就是个也可能是inline-block块,容器内部一个格一个格的。和 Flex 布局一样,它也分容器属性和项目属性。

网格线

网格线有横线和纵线,纵横交错的线就将网格容器切割成了最小的单元单元格。网格线是有编号的,从数字1开始编号。上图中有6条横线和6条纵线。如果你喜欢也可以给线起名字,一根线还能有多个名字。

单元格

Grid Cell 图中绿色背景的块就是单元格,网格布局的最小计量单位,该容器一共有25个单元格。

网格轨道

两条相邻的网格线中间部分就是轨道,为啥要有轨道的概念呢?因为需要设定轨道的宽度,如果将宽高单独的设置到单元格上那很可能变成了瀑布流复杂程度嗖嗖地上升。再看看上图的浅蓝色和浅粉色轨道感受一下。

网格区域

网格线、单元格、和轨道存在的意义就是将容器划分出你所需要的区域Grid Area。区域是可包含多个单元格的一个整块,那么如何划分呢?两条横的网格线和两条纵的网格线交叉的部分就是区域了。将容器合理的划分出多个区域,那么布局目的也达到了。区域是可以重叠的,所以它是有 z-index。

以上内容就是css栅格布局GRID教程,希望能帮助到大家。

相关推荐:

CSS Grid布局指南

CSS Grid布局模块简介_html/css_WEB-ITnose

五分钟教会你 CSS Grid 布局

以上就是css栅格布局GRID教程的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:GRID 样式表 css
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS3+Js实现响应式导航条_CSS/HTML
  • 从零学CSS系列之文本属性_基础教程
  • 手机屏幕尺寸测试——手机的实际显示页面的宽度_经验交流
  • CSS3中Transition属性详解以及示例分享_CSS/HTML
  • css栅格布局GRID教程
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    • PeterZhu
    • 2017-03-20 22:47:17
    • 点击数(111780)

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    • PeterZhu
    • 2017-05-16 12:03:57
    • 点击数(109790)

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    • PeterZhu
    • 2017-03-13 10:15:11
    • 点击数(84266)

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • PeterZhu
    • 2017-07-24 16:48:56
    • 点击数(83422)

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    • 小云云

      全栈工程师

    • 想不好签名了...
    • 5865篇
      文章总数
    • 143
      文章总浏览数

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节