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的更多相关文章

  1. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  2. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  3. CSS中的 position与Grid Layout

    [1]CSS之Position(定位布局): 现css常用的属性有5种: 1.static 2.absolute 3.fixed 4.relative 5.sticky. 1.static 表示元素的 ...

  4. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  5. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  6. css grid layout in practice

    css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...

  7. CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003

    Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...

  8. 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 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. C# winform利用反射和自定义特性加载功能模块(插件式开发)

    由于在实际的工作中, 碰见这样的一个问题: 一个软件, 销售给A客户 他需要所有功能, 但是销售给B客户, 他只需要其中的一部分, 1.如果我们在实际的开发过程中, 没有把一些功能模块区分开来的话, ...

  2. action中json的应用

    这篇文章重点介绍action中json数据的返回处理:假设须要看前端代码的一些特效或ajax的json接收,请看上一篇博客:http://blog.csdn.net/yangkai_hudong/ar ...

  3. wechat4j框架具体解释

    发送消息: 基于上面access_token的逻辑,在构造发送消息对象的时候请依照例如以下代码. wechat4j和微信强力推荐的方法 CustomerMsg customerMsg = new Cu ...

  4. 《从零開始学Swift》学习笔记（Day 59）——代码排版

    原创文章,欢迎转载.转载请注明:关东升的博客 代码排版包括: 空行.空格.断行和缩进等内容.代码排版内容比較多工作量非常多.可是非常重要. 空行 空行将逻辑相关的代码段分隔开.以提高可读性. 下列情况 ...

  5. subline Text3 安装及汉化

    因为自己的subline 有问题  所以决心重新改一下了. 三步: http://www.sublimetext.com/3      官网下载subline3 https://www.imjeff. ...

  6. LVM 常用命令

    fdisk -l 查看硬盘信息 df -h查看文件系统使用量 fdisk /dev/sdb处理硬盘,删除分区,新建分区之类 partprobe将核心的 partition table 更新 mkfs ...

  7. Day2：PYC

    一.pyc里装的是预编译后的字节码文件 二.一般存放在”__pycache__“目录 三.当python程序运行时,编译的结果是保存在位于内存中的PyCodeObject中,当Python程序运行结 ...

  8. git的安装及其使用

    在Windows上安装Git的快捷方式: 工具:1.Windows的console工具:ConEmu(https://conemu.github.io/)多窗口.记录log.多theme选择,操作Gi ...

  9. WinPcap 简介

    WinPcap(windows packet capture) 它包括一个核心态的包过滤器NPF,一个底层的动态链接库(packet.dll)和一个高层的不依赖于系统的库(wpcap.dll). [w ...

  10. 11.1 Android显示系统框架_framebuffer原理及改进

    1. Android显示系统框架Android Graphic UI with GPU Hardware Accelerationhttps://community.nxp.com/docs/DOC- ...