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. react radio onchange事件点击无效

    记: 项目需求:   页面中radio默认选中        第一次进去页面   点击radio的时候不管怎样点击    都是选中 连onChange事件都没触发 进入页面  点击刷新   点击rad ...

  2. Android Studio使用Mob来获取手机验证码的源码

    本文来自:CSDN 感谢作者:qq_35812301(其实就是我的号!) 查看原文:http://blog.csdn.net/qq_35812301/article/details/79150775 ...

  3. WPF 入门《布局面板》

    常见的几个布局面板 1.StackPanel面板 StackPanel面板能够简单根据单行或者单列进行元素排列, StackPanel 默认的布局方向为垂直方向(Vertical), 由Orienta ...

  4. 在 Android* 商务应用中实施地图和地理围栏特性

    摘要 本案例研究讨论了怎样将地图和地理定位特性构建到 Android* 商务应用中.包含在 Google Maps* 上覆盖商店位置,以及在设备进入商店地理围栏邻近区域时借助地理围栏通知用户. 文件夹 ...

  5. quartz中的corn表达式(转)

    Quartz的cron表达式 一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,可是你须要考虑你月 ...

  6. innodb next-key lock解析

    參考http://blog.csdn.net/zbszhangbosen/article/details/7434637#reply 这里补充一些: (1)InnoDB默认加锁方式是next-key ...

  7. Android 6.0 最简单的权限获取方法 RxPermition EasyPermition

    Android 6.0 要单独的获取权限 这里提供两种很简单的方法 EasyPermition RxPermition EasyPermition https://github.com/googles ...

  8. 使用node.js+babel,支持import/export语法

    如果要在node里面支持import/export default语法步骤: 1.使用npm安装 babel的客户端工具 npm init 会生成package.json文件 2.接着安装bebel客 ...

  9. JVM route

    http://www.linuxidc.com/Linux/2013-06/86446.htm

  10. Spring Profiles example--转载

    原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...