<!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. C++标准转换运算符static_cast

    该运算符把expression转换为type-id类型,但没有运行时类型检查来保证转换的安全性.   中文名 暂无 外文名 static_cast 分    类 强制类型转换 类    型 C++ s ...

  2. Global Pose Estimation with an Attention-based Recurrent Network

    related work包含比较多,对SLAM和最近神经网络对于定位的工作介绍比较多.

  3. [转]Android--多线程之Handler

    原文:http://www.cnblogs.com/plokmju/p/android_Handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了解决 ...

  4. 一个简单的perl程序

    和朋友聊天,说perl的神奇,最主要的是一行代码搞定所有. 想想用python3写的测试脚本,觉得还是有点多的,真的用几行代码写一个测试脚本,可以节约不少时间. 当然,网上黑perl的还是很多,不过自 ...

  5. 针对程序集 'SqlServerTime' 的 ALTER ASSEMBLY 失败，因为程序集 'SqlServerTime' 未获授权(PERMISSION_SET = EXTERNAL_ACCESS)

    错误: 针对程序集 'SqlServerTime' 的 ALTER ASSEMBLY 失败,因为程序集 'SqlServerTime' 未获授权(PERMISSION_SET = EXTERNAL_A ...

  6. 备份集中的数据库备份与现有的xx数据库不同”解决方法

    搞定

  7. perl 安装Image::Magick 模块

    ImageMagick 是一个处理图片的库,有C, perl, python, java 等多种语言对应的库 在安装perl 对应的Image::Magick 模块之前,首先需要安装 ImgeMagi ...

  8. Redis系列-php怎么通过redis扩展使用redis

    From: http://blog.csdn.net/love__coder/article/details/8691679 通过前面几篇blog,我们应该对redis有个大致的认识,这里再讲解下,p ...

  9. MySQL的varchar长度问题

    From: http://blog.csdn.net/longyulu/article/details/7863737 http://dinglin.iteye.com/blog/914276 htt ...

  10. 特殊权限set_uid /特殊权限set_gid/特殊权限stick_bit/软链接文件/硬连接文件

    2.18 特殊权限set_uid 2.19 特殊权限set_gid 2.20 特殊权限stick_bit 2.21 软链接文件 2.22 硬连接文件 特殊权限set_uid(s权限用户user权限) ...