We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using the dense keyword. How do we approach this using grid-auto-flow?

By default 'grid-auto-flow' is 'row'.

For example, we have this setup:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>change-the-auto-placement-behaviour-of-grid-items-with-grid-auto-flow</title>

    <style>

        .container > * {

            background-color: antiquewhite;

        }

        .container {

            display: grid;

            height: 100vh;

            grid-gap: 10px;

            grid-template-columns: repeat(4, 1fr);

            grid-template-rows: repeat(4, 1fr);

        }

    </style>

</head>

<body>

<div class="container">

    <div class="grid-item">1</div>

    <div class="grid-item">2</div>

    <div class="grid-item">3</div>

    <div class="grid-item">4</div>

    <div class="grid-item">5</div>

    <div class="grid-item">6</div>

    <div class="grid-item">7</div>

    <div class="grid-item">8</div>

    <div class="grid-item">9</div>

    <div class="grid-item">10</div>

</div>

</body>

</html>

It should looks like:

Notice how items flows:

1->2->3->4

5->6->7->8

9->10

Now if we change 'grid-auto-flow' to 'column':

As we can see, now the how items flows:

1     5     9

2     6     10

3     7

4     8

So after understand how item flows for 'grid-auto-flow', let's see how 'grid-auto-flow' can help us auto fill the hole.

For example we have this setup:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>change-the-auto-placement-behaviour-of-grid-items-with-grid-auto-flow</title>

    <style>

        .container > * {

            background-color: antiquewhite;

        }

        .container {

            display: grid;

            height: 100vh;

            grid-gap: 10px;

            grid-template-columns: repeat(4, 1fr);

            grid-template-rows: repeat(4, 1fr);

            grid-auto-flow: row;

        }

        .grid-item:nth-of-type(2) {

            grid-column: span 2;

        }

        .grid-item:nth-of-type(3) {

            grid-column: span 3;

        }

        .grid-item:nth-of-type(8) {

            grid-row: span 3;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="grid-item">1</div>

    <div class="grid-item">2</div>

    <div class="grid-item">3</div>

    <div class="grid-item">4</div>

    <div class="grid-item">5</div>

    <div class="grid-item">6</div>

    <div class="grid-item">7</div>

    <div class="grid-item">8</div>

    <div class="grid-item">9</div>

    <div class="grid-item">10</div>

</div>

</body>

</html>

It looks like:

As you can see, after item 2, there is a gap which item 3 cannot fit in. In this case, we can use 'dense' to help.

Code:

grid-auto-flow: row dense;

As you can see, item 4 fill the gap after item 2.

Now last, let see 'column dense' case:
If with out 'dense', it looks like:

As you can see, it supposes to have 4 cols , but no it has 5 cols, because item 10 have no space leave. So now if we add 'column dense':

grid-auto-flow: column dense;

[CSS] Change the auto-placement behaviour of grid items with grid-auto-flow的更多相关文章

  1. [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

    最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...

  2. [CSS] Nest a grid within a grid

    A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

  3. [CSS] Re-order the appearance of grid items using the order property

    As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and ...

  4. [Grid Layout] Place grid items on a grid using grid-column and grid-row

    It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid- ...

  5. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  6. [CSS] Change the Alignment of a Single Flexed Item with 'align-self'

    Inside of a flexed container, a single item can control its own flex with align-self. The possible v ...

  7. [CSS] Change the off-axis Alignment of a Flexed Container with `align-items`

    We changed the axis layout with 'justify-content', and the "off axis" layout is controlled ...

  8. [转]extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决方法

    原文地址:http://379548695.iteye.com/blog/1167234 grid的复选框定义如下:   var sm = new Ext.grid.CheckboxSelection ...

  9. CSS: Grid Layout Module

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

随机推荐

  1. windows7下安装Office2010提示需要安装MSXML6.10.1129

    平台:Windows 7 问题:刚刚下载的ghost Win 7,安装过程一切顺利,进入系统后把集成的软件全部卸载,清理完垃圾,安装了VC库,在安装Office2010时提示需要安装MSXML6.10 ...

  2. 删除online日志測试及ora-600 [4194]错误的处理

    今天做了一个关于破坏online日志的恢复測试,主要三个场景: 測试1:正常关闭数据库后删除非当前日志 測试2:正常关库后.删除在线日志文件 測试3:非正常关闭数据库.并删除当前在线日志文件 我的測试 ...

  3. SQL-.db 数据库查看常用指令（转载）

    一下内容转载自http://blog.sina.com.cn/s/blog_74dfa9f401017s69.html 简介sqlite3一款主要用于嵌入式的轻量级数据库,本文旨在为熟悉sqlite3 ...

  4. 1.1 Introduction中 Kafka as a Messaging System官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Kafka as a Messaging System kafka作为一个消息系统 ...

  5. Redis的高级应用-事务处理、持久化、发布与订阅消息、虚拟内存使用

    三.事务处理 Redis的事务处理比较简单.只能保证client发起的事务中的命令可以连续的执行,而且不会插入其他的client命令,当一个client在连接 中发出multi命令时,这个连接就进入一 ...

  6. SQL_wm_concat函数实验：实现字段合并

    原创作品,出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  7. hdu5384 AC自己主动机模板题，统计模式串在给定串中出现的个数

    http://acm.hdu.edu.cn/showproblem.php?pid=5384 Problem Description Danganronpa is a video game franc ...

  8. 基于ContentObserver来动态取消或加入屏幕超时任务

    前面也说了.ContentObserver能够来监控数据库里某一项数据的变化,当然也能够同一时候监控多个数据项的变化. 笔者在项目中须要改动到屏幕超时的需求,比方在车载业务中,倒车事件发生的时候,是不 ...

  9. Altium Designer中画pcb如何隐藏和显示地线

    如何隐藏: 如何显示: 按下N后

  10. shiro 中的filterChainDefinitions详解(转)

    springrain使用shiro控制权限,配置filterChainDefinitions结合数据库校验权限. 我们在web.xml中配置一个全局过滤器,也就是在springrain配置的是一个sp ...