.wrapper{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}

三行代码实现你头疼的九宫格布局:源码,翻到方法六就有了

这就是grid的魅力。

哎呀,最近没有计划深入学习,先贴几篇不错的博文吧。

今天的任务只是利用grid实现九宫格。已经实现了,暂时不深入追究。

日后深入研究grid再整理成文吧。

学习路径:

5分钟学会 CSS Grid 布局

CSS Grid 布局完全指南(图解 Grid 详细教程)

如何使用 CSS Grid 快速而又灵活的布局

css - Grid网格布局的更多相关文章

  1. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  2. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  3. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  4. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  5. css grid 网格布局

    前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...

  6. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  7. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  8. 不用bootstrap,只用CSS创建网格布局

    本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...

  9. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

随机推荐

  1. android:应用性能优化SparseArray

    HashMap是java里比较常用的一个集合类,我比较习惯用来缓存一些处理后的结果.最近在做一个Android项目,在代码中定义这样一个变量,实例化时,Eclipse却给出了一个 performanc ...

  2. BTrace使用小结

    简介 BTrace是一个安全的JVM动态追踪工具,最初为原Sun公司Kenai项目下面的一个子项目. 典型的使用场景是,“我要查个问题,可那个方法没有打印入口参数和返回结果日志”,“我想看某个方法的执 ...

  3. 微软BI 之SSIS 系列 - Lookup 中的字符串比较大小写处理 Case Sensitive or Insensitive

    开篇介绍 前几天碰到这样的一个问题,在 Lookup 中如何设置大小写不敏感比较,即如何在 Lookup 中的字符串比较时不区分大小写? 实际上就这个问题已经有很多人提给微软了,但是得到的结果就是 C ...

  4. Codeforces Round #277.5 (Div. 2)C——Given Length and Sum of Digits...

    C. Given Length and Sum of Digits... time limit per test 1 second memory limit per test 256 megabyte ...

  5. 基于Ubuntu 搭建 VNC 远程桌面服务

    系统要求:Ubuntu 16.04.1 LTS 64 位操作系统 安装.启动 VNC VNC 远程桌面原理 注:本小节内容旨在帮助您更好地了解 Xorg.X11.VNC 等概念和原理,如果你不想了解原 ...

  6. Linux说明书 - man浅谈

    原文链接: http://www.cnblogs.com/xuxn/archive/2011/08/26/linux-manual-man-command.html 所有学过Linux的同学都应该知道 ...

  7. openssl - 数字证书的编程解析

    原文链接: http://www.cangfengzhe.com/wangluoanquan/37.html 这篇文章主要介绍PKI公钥体系中非常核心元素——数字证书的编程解析.在SSL,SET等安全 ...

  8. Python验证码识别 安装Pillow、tesseract-ocr与pytesseract模块的安装以及错误解决

    1.安装Pillow pip install Pillow 2.安装tesseract-ocr OCR(Optical Character Recognition, 光学字符识别) 软件 安装包含两个 ...

  9. python os.system()和os.popen()

    1>python调用Shell脚本,有两种方法:os.system()和os.popen(),前者返回值是脚本的退出状态码,后者的返回值是脚本执行过程中的输出内容.>>>hel ...

  10. select 语法

    select 语句主要语法: SELECT select_list [ INTO new_table ] FROM table_source [ WHERE search_condition ] [ ...