[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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- Shell中反引号（`）与$()用法的区别
今天有人提问: echo `echo \\\\\\\w` echo $(echo \\\\\\\w) 为什么输出的不一样? 这就引申出了另一个问题:反引号与$()有没有区别? 这是一个非常有意思的问题 ...
- HTML基础第六讲---表格
转自:https://i.cnblogs.com/posts?categoryid=1121494 上一讲,讲了关于<控制表格及其表项的对齐方式>,在这里我要讲讲表格及其属性 ,然后大家在 ...
- 83.#pragma详解
创建数据段 //创建数据段 #pragma data_seg("fangfangdata") ; #pragma data_seg() 与数据段连接,实现数据通信,分享 //实现数 ...
- Java Web学习总结（7）——HttpServletRequest对象
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
- [Angular] Http Custom Headers and RequestOptions
updatePassenger(passenger: Passenger): Observable<Passenger> { let headers = new Headers({ 'Co ...
- Altium Designer如何删除以布的线
- pragma pack,字节对齐
关于字节对齐 pragma pack 一. 测试代码: // packTest.cpp : Defines the entry point for the console application. / ...
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic ...
- 装饰模式和python装饰器
装饰器和装饰模式 先给出两者的定义: - 装饰器:装饰器是一个非常著名的设计模式,常常被用于有切面需求的场景.较为经典的有插入日志.性能測试.事务处理等. 装饰器是解决这类问题的绝佳设计.有了装饰器, ...
- jQuery笔记---选择器(二)
1.选择器练习: 1)查找UL中的元素的内容 格式:$(“ul li:XX”).text() XX:代表方法 比如:获取到第一元素,然后获取当中的值 $(“ul li:first”).text() 获 ...