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. 洛谷 P1755 斐波那契的拆分

    P1755 斐波那契的拆分 题目背景 无 题目描述 已知任意一个正整数都可以拆分为若干个斐波纳契数,现在,让你求出n的拆分方法 输入输出格式 输入格式: 一个数t,表示有t组数据 接下来t行,每行一个 ...

  2. 51 nod 1189 阶乘分数

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1189 题目思路: 1/n! = 1/x +1/y ==> ...

  3. cv2.putText 文字换行（'\n'）无法解析换行

    OpenCV putText() new line character cv2.putText 在向图像中添加文本信息时,如果在待添加的文本中含有换行转义符,一般它是无法正确处理的: cv2.putT ...

  4. css滑动鼠标到img后，切换图片

    写了个样例: <a href="#"><img src="http://csdnimg.cn/pubfooter/images/gongshang_lo ...

  5. SafeSEH原理及绕过技术浅析

    SafeSEH原理及绕过技术浅析 作者:magictong 时间:2012年3月16日星期五 摘要:主要介绍SafeSEH的基本原理和SafeSEH的绕过技术,重点在原理介绍. 关键词:SafeSEH ...

  6. Ubuntu 14.04安装teamviewer 远程桌面

    teamviewer 真是一款非常强大的远程登录软件,可以跨Windows和Ubuntu远程登录,但是在64bit的Ubuntu下安装时,按照官方安装方法总是会遇到问题,下面说一下如何安装: 安装i3 ...

  7. CSS笔记 - fgm练习 2-7 - 简易选项卡

    练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...

  8. [RxJS] AsyncSubject: representing a computation that yields a final value

    This lesson will teach you about AsyncSubject, another type of Subject with some replaying logic ins ...

  9. iOS Objc Runtime 教程+实例Demo

    样例Demo 欢迎给我star!我会继续分享的. 概述 Objc Runtime使得C具有了面向对象能力,在程序执行时创建,检查.改动类.对象和它们的方法.Runtime是C和汇编编写的,这里http ...

  10. 【微信小程序】自定义模态框实例

    原文链接:https://mp.weixin.qq.com/s/23wPVFUGY-lsTiQBtUdhXA 1 概述 由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自 ...