<!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. 简介vsftpd及搭建配置 关闭selinux 不能创建文件

    简介vsftpd及搭建配置一.简介 FTP(文件传输协议)全称是:Very Secure FTP Server. Vsftpd是linux类操作系统上运行的ftp服务器软件. vsftp提供三种登陆方 ...

  2. iOS开发小技巧 - runtime适配字体

    iOS开发小技巧 - runtime适配字体 版权声明:本文为博主原创文章,未经博主允许不得转载,有问题可联系博主Email: liuyongjiesail@icloud.com 一个iOS开发项目无 ...

  3. IDEA 中 同一个微服务 按照多个端口启动

    网上讲这个东西的很多,抄来抄去的,大部分类似,多数没讲明白为什么那么配置. 譬如eureka.client.register-with-eureka和fetch-registry是否要配置,配不配区别 ...

  4. webpack2--webpack 4.X 快速创建demo

    准备工作 1.新建文件夹:webpack-demo(下面我们简称该文件夹为根目录),在根目录下面建两个文件夹,分别为src和dist. 1).src文件夹:用来存放我们编写的javascript代码, ...

  5. (通用)Android App代码混淆终极解决方案【转】

    App虽然没有那么的高大上,但是代码的混淆是代表了程序员对App的责任心, 也是对App安全的一点点保证.今天我会将自己做Android混淆的过程和体会分享给大家,也避免大家少走弯路,少跳坑. 本篇博 ...

  6. (笔记)Mysql命令desc：获取数据表结构

    desc命令用于获取数据表结构. desc命令格式:    desc 表名;同样    show columns from 表名;也能获取数据表结构. 举例如下:mysql> desc MyCl ...

  7. (原创)Linux下的floating point exception错误解析

    很多人也许都碰到过这样的错误:linux下程序刚一运行就报错:Floating point exception. 其实这个问题很容易排查,绝大多数情况情况都是逻辑的问题,如:c = a/b;或 c = ...

  8. Failed to import package with error: Couldn't decompress package的解决方案

    问题的出现 在Unity中导入一个Package文件,出现以下出错信息 解决方案 遇到这样的报错信息,一般就是要将该文件包的存储路径设置为英文,因为Unity不识别中文路径:其次对文件包的命名中间应没 ...

  9. SpringMVC系列（十四）Spring MVC的运行流程

    Spring MVC的运行流程图: 1.首先看能不能发送请求到Spring MVC的DispatcherServlet的url-pattern2.如果能发送请求,就看在Spring MVC中是否存在对 ...

  10. 查询sql server 表结构

    select column_name,data_type from information_schema.columns where table_name = '表名'