[CSS] Get up and running with CSS Grid Layout
We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<header>Header</header>
<aside>Aside 1</aside>
<section>Section</section>
<aside>Aside 2</aside>
<footer>Footer</footer>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
</div>
</body>
</html>
.container {
display: grid;
grid-gap: 5px;
grid-template-areas:
"header"
"section"
"aside-1"
"aside-2"
"footer";
}
@media (min-width: 700px) {
.container {
grid-template-areas:
"header header header"
"aside-1 section aside-2"
"footer footer footer";
}
}
/* All Grid Items */
.container > * {
background-color: mediumseagreen;
font-size: 80px;
}
header {
grid-area: header;
}
aside:nth-of-type(1) {
grid-area: aside-1;
}
section {
grid-area: section;
}
aside:nth-of-type(2) {
grid-area: aside-2;
}
footer {
grid-area: footer;
}
[CSS] Get up and running with CSS Grid Layout的更多相关文章
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- CSS中的 position与Grid Layout
[1]CSS之Position(定位布局): 现css常用的属性有5种: 1.static 2.absolute 3.fixed 4.relative 5.sticky. 1.static 表示元素的 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- CSS Grid Layout In Action
CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
- CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003
Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...
- WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF
WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF WeasyPrint c ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- ASP.Net MVC Filter验证用户登录
一.Filter是什么 ASP.NetMVC模式自带的过滤器Filter,是一种声明式编程方式,支持四种过滤器类型,各自是:Authorization(授权),Action(行为),Result(结果 ...
- matlab 辅助函数 —— 文件下载与文件解压
0. 可读性的提升 为了提升代码的交互友好性,可在代码执行一些耗时操作时,显示地输出一些文本信息,以显示进度: fprintf('Downloading xxfilename...\n') urlwr ...
- SqlMapConfig.xml全局配置文件解析（mybatis）
原文 http://www.cnblogs.com/selene/p/4607004.html 一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) set ...
- 右键菜单→新建→BAT 批处理文件
目的:以前编写BAT,通常新建一个文本,然后另存为 .bat,比较麻烦,那么如何右键新建菜单里添加新建批处理文件呢? 代码如下: @echo offcd /d %temp%echo Windows R ...
- jmeter连接mysql数据库配置
用jmeter连接mysql数据库,在配置的过程中遇到了几个坑,跟大家分享一下,避免人人踩坑~~ 关于驱动包:大部分时候是需要下载与服务器的mysql相同版本的jar包~~ 关于驱动包路径:不是所有的 ...
- 00091_字符输入流Reader
1.字符输入流Reader (1)字符输入流Reader我们读取拥有中文的文件时,使用的字节流在读取,那么我们读取到的都是一个一个字节: (2)只要把这些字节去查阅对应的编码表,就能够得到与之对应的字 ...
- 高可用架构篇--MyCat在MySQL主从复制基础上实现读写分离
实战操作可参考:http://www.roncoo.com/course/view/3117ffd4c74b4a51a998f9276740dcfb 一.环境 操作系统:CentOS-6.6-x86_ ...
- Android Material风格的应用(四)--FloatActionButton
添加 FloatActionButton和SnackBar Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--Re ...
- POJ 3669 Meteor Shower BFS 水~
http://poj.org/problem?id=3669 题目大意: 一个人从(0,0)出发,这个地方会落下陨石,当陨石落在(x,y)时,会把(x,y)这个地方和相邻的的四个地方破坏掉,求该人到达 ...
- Day2：PYC
一.pyc里装的是预编译后的字节码文件 二.一般存放在”__pycache__“目录 三.当python程序运行时,编译的结果是保存在位于内存中的PyCodeObject中,当Python程序运行结 ...