[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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- Python 极简教程（十一）字典 dict
字典是以大括号标识,以键值对(key:value)的形式,无序,不可重复,可变的集合类型. 字典具有非常高效的读写效率. >>> d = {} # 创建一个空字典 >>& ...
- 深度学习利器： TensorFlow系统架构及高性能程序设计
2015年11月9日谷歌开源了人工智能平台TensorFlow,同时成为2015年最受关注的开源项目之一.经历了从v0.1到v0.12的12个版本迭代后,谷歌于2017年2月15日发布了TensorF ...
- hadoop组件及其作用
1.hadoop有三个主要的核心组件:HDFS(分布式文件存储).MAPREDUCE(分布式的计算).YARN(资源调度),现在云计算包括大数据和虚拟化进行支撑. 在HADOOP(hdfs.MAPRE ...
- 【转】CentOS/RHEL/OracleLinux使用UDEV配置ASMDISK
转自:http://blog.csdn.net/staricqxyz/article/details/8332566 RHEL 5 / CentOS 5 / Oracle Linux 5 [root@ ...
- 一起talk C栗子吧（第八回：C语言实例--素数）
各位看官们,大家好,从今天開始.我们讲大型章回体科技小说 :C栗子,也就是C语言实例. 闲话休提, 言归正转. 让我们一起talk C栗子吧! 看官们.上一回中咱们说的是进制转换的样例,这一回咱们说的 ...
- thinkphp事务机制
thinkphp事务机制 一.总结 下面文章也要看,下面有抛出异常(自己提供错误信息那种) 1.事务机制(原子性):所有的事情都完成了就提交,否则回滚.电商里面用的多,付钱买东西的时候. 2.样例(简 ...
- 前端实时消息提示的效果-websocket长轮询
WebSocket是html5新增加的特性之一,可以实现客户端和服务器彼此之间相互通信,也可以实现跨域通信,目前大部分主流浏览器都支持,iE浏览器需要10版本以上. 需求:公司项目有一个报警模块,当后 ...
- 【POJ 3415】Common Substrings
[链接]h在这里写链接 [题意] 求两个串的长度大于等于k的公共子串个数. 相同的重复计数. [题解] 先把两个字符串用一个分隔符分开.最好比出现的字符都大的一个数字. ...
- 公钥，私钥和数字签名这样最好理解 分类： B3_LINUX 2015-05-06 16:25 59人阅读 评论(0) 收藏
一.公钥加密 假设一下,我找了两个数字,一个是1,一个是2.我喜欢2这个数字,就保留起来,不告诉你们(私钥),然后我告诉大家,1是我的公钥. 我有一个文件,不能让别人看,我就用1加密了.别人找到了这个 ...
- 判断客户端是iPad、安卓还是ios
武穆逸仙 有人心疼时,眼泪才是眼泪,否则只是带着咸味的液体:被人呵护着,撒娇才是撒娇,要不然就是作死. 努力做一个可爱的人,不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的 ...