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. mysql集群搭建教程-基础篇

           计算机一级考试系统要用集群,目标是把集群搭建起来,保证一个库dang了,不会影响程序的运行.于是在孟海滨师哥的带领下开始了我的第一次搭建mysql集群,首先看了一些关于集群的资料,然后根 ...

  2. amazeui学习笔记二（进阶开发2）--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  3. node.js服务器核心http和文件读写

    使用htpp给客服端的数据,把数据交给浏览器渲染.利用 http创建服务器,如客户端请求为:127.0.0.1:3000或127.0.0.1:3000/xxx.html时 ,判断www文件夹中,文件  ...

  4. “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1

    官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...

  5. treap-名次树-树堆

    #include <cstring> #include <cstdio> #include <cstdlib> using namespace std; struc ...

  6. oracle函数大全-字符串处理函数

    字符函数——返回字符值 这些函数全都接收的是字符族类型的参数(CHR 除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据库类 ...

  7. UVA 10391 - Compound Words 字符串hash

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  8. Android android.database.CursorIndexOutOfBoundsException:Index -1 requested, with a size of 1

    Android中数据库处理使用cursor时,游标不是放在为0的下标,而是放在为-1的下标处开始的. 也就是说返回给cursor查询结果时,不能够马上从cursor中提取值. 下面的代码会返回错误 U ...

  9. C语言深度剖析-----C语言中的字符串

    S1字符数组 S2字符串,存在于栈空间 S3最常规的写字符串的方法,malloc是堆空间,存在于只读存储区,我们不能够改变指向S3的数据 S4堆空间  S4 字符串的长度 判断字符串长度,assert ...

  10. autohotkey excel getfullname (ComObjActive)