<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .box {

    background: orange;

    height: 100px;

    line-height: 100px;

    text-align: center;

    color: #fff;

    font-size: 3em;

    margin-right:15px;

  }

  .box:nth-child(even) {

    background: green;

  }

  .wrapper {

    width: 560px;

    border: 1px solid orange;

    padding: 15px;

    display: grid;

    grid-template-columns: repeat(5, 115px);

    /*第一行高115px,第二行高100px*/

    grid-template-rows: repeat(1, 115px);

    /*默认是:row*/

    grid-auto-flow:column;

  }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="box a">A</div>

    <div class="box b">B</div>

    <div class="box c">C</div>

    <div class="box d">D</div>

    <div class="box e">E</div>

    <div class="box f">F</div>

    <div class="box g">G</div>

    <div class="box h">H</div>

    <div class="box i">I</div>

    <div class="box j">J</div>

  </div>

</body>

</html>

grid网格的流动grid-auto-flow属性的更多相关文章

  1. grid网格的流动一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. grid网格的流动定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  4. grid - 网格项目对齐方式（Box Alignment）

    CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式. <view class="grid"> <view class='ite ...

  5. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  6. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  7. CSS 之Grid网格大致知识梳理1

    CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局,而它的一些主要应用属性如下: 1.将父容器的display属性值设置为grid 即可将其转换为网格容器: 2.在网格容器中添加列的属 ...

  8. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  9. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

随机推荐

  1. Centos 安装jdk jre

    下载rpm http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7-downloads-1880260.html wget ht ...

  2. JS实现IE下打印和打印预览

    http://blog.csdn.net/rongyongfeikai2/article/details/8460598 ——————————————————————————————————————— ...

  3. node学习笔记9——cookie,session相关操作

    下面讲的都是基Express及相关的包.所以在实践本篇文章之前,通过npm安装好Express, cookie-parser, cookie-session这三个安装包. 先简单说一下,如何用Expr ...

  4. 8、QObject类 moc处理后代码

    QObject在QT中是所有类的基类,经过MOC处理后代码如下 之所以贴出这段代码,是因为很多流程追踪到最后一些关键性函数都是出自这个类 源码 4.8.6 MOC版本 63 1 /********** ...

  5. 关于Unity中的光照(七)

    全局光照 GI 这里所说的反射就是,一个红色的物体,当太阳照射它的时候,它周围的物体也会变得有点红. 1:Realtime每帧都会计算光照,实时光照是不会反射的,所以它的光影显得单调;2:Baked ...

  6. c语言for循环等语句详解

    循环结构有: . goto语句和if语句构成循环 .while语句 .do-while语句 .for语句 goto语句 goto语句是一种无条件转移语句, 与Basic中的goto语句相似.goto语 ...

  7. Spring JDBC NamedParameterJdbcTemplate类示例

    org.springframework.jdbc.core.NamedParameterJdbcTemplate类是一个具有基本JDBC操作的模板类,允许使用命名参数而不是传统的’?‘占位符. 这个类 ...

  8. (转)常见LCD接口

    LCD常用接口原理 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 xubin 平台信息:内核:linux2.6/linux3.0系统: ...

  9. CI框架 -- 在视图文件中使用 PHP 替代语法

    如果你不使用 CodeIgniter 的 模板引擎, 那么你就只能在视图文件中使用纯 PHP 语法了.为了精简视图文件, 使其更可读,建议你在写控制结构或 echo 语句时使用 PHP 的替代语法. ...

  10. 我的openwrt开发相关文章

    openwrt学习笔记: 在openwrt的学习过程中,走了非常多的弯路.一直以来有个期盼.希望能够出个简易教程,希望openwrt的同仁们能够更加高速的入手. . openwrt学习笔记(三十二): ...