We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

We can mix 'fr' with other units:

grid-template-rows: 60px 10fr 2fr;

We can use '.' as empty placeholder:

            grid-template-areas:
". header"
"aside section"
"aside footer";

Try to resize me:

[Grid Layout] Describe a grid layout using grid-template-areas的更多相关文章

  1. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  2. Auto Layout Guide----(一)-----Understanding Auto Layout

    Understanding Auto Layout 理解自动布局 Auto Layout dynamically calculates the size and position of all the ...

  3. [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...

  4. ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet

    实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...

  5. Ext.grid.Panel 数据动态改变后刷新grid

    gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...

  6. Ext4.0.7使用Ext.grid.ColumnModel报错:TypeError: Ext.grid.Model is not a constructor

    代码如下: Ext.onReady(function(){ //定义列 var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'i ...

  7. Kendo Grid:将Edit button 移到grid view 得顶部

    因为kendo grid 得toolbar 里不包括Edit button,所以我们要先用template 创建一个自定义得edit button,然后再对这个button实现edit 功能. < ...

  8. Fineui 根据datatable结构动态创建grid列,帮助类。动态绑定grid。

    public class FineuiHelper     {         /// <summary>         /// 动态创建Grid结构,在 Page_Init事件里执行( ...

  9. Layout Inflation :Unconditional layout, inflation from view adapter

    Layout inflation在Android上下文环境下转换XML文件成View结构对象的时候需要用到. LayoutInflater这个对象在Android的SDK中很常见,但是你绝对没想到竟然 ...

随机推荐

  1. HDU 1007 Quoit Design 平面内最近点对

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 上半年在人人上看到过这个题,当时就知道用分治但是没有仔细想... 今年多校又出了这个...于是学习了一下平 ...

  2. 在window编写好的网站往linux上发布

    得知ASP.NET CORE可以跨平台,我内心很躁动,毕竟自己喜欢的,之前没有学过linux导致一开始上手linux有点困难,按照https://www.microsoft.com/net/core# ...

  3. DTU(用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备)

    DTU (Data Transfer unit),是专门用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备.DTU广泛应用于气象.水文水利.地质等行业.

  4. Spring学习总结(9)——Spring AOP总结

    spring IOC和AOP是Spring框架的两大核心基石,本文将对Spring AOP做一个系统的总结. 什么是AOP AOP(Aspect-Oriented Programming,面向切面编程 ...

  5. JAVA 水题

    纯粹是让我来掌握熟练度的. 1.金蝉素数 某古寺的一块石碑上依稀刻有一些神秘的自然数. 专家研究发现:这些数是由1,3,5,7,9 这5 个奇数字排列组成的5 位素数,且同时去掉它的最高位与最低位数字 ...

  6. 一个DDOS病毒的分析(一)

    一.基本信息 样本名称:Rub.EXE 样本大小:21504 字节 病毒名称:Trojan.Win32.Rootkit.hv 加壳情况:UPX(3.07) 样本MD5:035C1ADA4BACE78D ...

  7. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  8. python3 格式化输出给定时间的下一秒

    # 功能:输入一个时间,格式化输出该时间的下一秒 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan # 功能:输入一个 ...

  9. 国密算法SM2证书制作

    国密算法sm2非对称算法椭圆曲线 原文:http://www.jonllen.cn/jonllen/work/162.aspx 前段时间将系统的RSA算法全部升级为SM2国密算法,密码机和UKey硬件 ...

  10. 程序员的困境 - R中国用户组-炼数成金

    原文:http://www.oschina.net/news/43389/the-plight-of-programmer 在大型公司中不能腐蚀自己的学习能力和时间能力. 最近我为一个内核程序员的职位 ...