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. 【Codeforces Round #451 (Div. 2) D】Alarm Clock

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法+二分. 类似滑动窗口. 即左端点为l,右端点为r. 维护a[r]-a[l]+1总是小于等于m的就好. (大于m就右移左端点) ...

  2. 【2017 Multi-University Training Contest - Team 9】Numbers

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6168 [题意] 有一个长度为n的序列a1--an,根据a序列生成了一个b序列,b[i] = a[i]+a ...

  3. [bzoj1269]文本编辑器editor [bzoj1500]维修数列

    1269: [AHOI2006]文本编辑器editor Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2540 Solved: 923 [Submit ...

  4. PHP版本 D-Link 动态域名客户端

    <?php /* * D-Link 动态域名客户端.主域名www.dlinkddns.com 和 www.dlinkddns.com.cn * 首先获取外网IP,若IP没有变化,则结束运行:否则 ...

  5. Flume Source官网剖析(博主推荐）

    不多说,直接上干货! 一切来源于flume官网 http://flume.apache.org/FlumeUserGuide.html Flume Sources Avro Source Thrift ...

  6. GO语言学习（十八）Go 语言接口

    Go 语言接口 Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 /* 定义接口 */ type interface ...

  7. 关于JS面向对象、设计模式、以及继承的问题总结

    1.对象:JS中万物皆对象,它是一个泛指 类:对象的具体的细分 (物以类聚,人与群分.具有相同属性和方法的实例的一个集合总称) 实例:某一个类别中具体的一个事物 对象是一个抽象的概念,类似于我们的自然 ...

  8. angular material dialog应用

    1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (clic ...

  9. 国密算法SM2证书制作

    国密算法sm2非对称算法椭圆曲线 原文:http://www.jonllen.cn/jonllen/work/162.aspx 前段时间将系统的RSA算法全部升级为SM2国密算法,密码机和UKey硬件 ...

  10. AE 向已存在的要素类中添加字段

    风过无痕 原文向已存在的要素类中添加字段 以前,在用AE写程序的时候,为了方便,一般都是直接新建一个MapControl窗体应用程序.这次需要解决的问题用不到窗口,就突发奇想,直接新建了一个Conso ...