[CSS] Change the auto-placement behaviour of grid items with grid-auto-flow
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的更多相关文章
- [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?
最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...
- [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.
- [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 ...
- [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- ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- [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 ...
- [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 ...
- [转]extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决方法
原文地址:http://379548695.iteye.com/blog/1167234 grid的复选框定义如下: var sm = new Ext.grid.CheckboxSelection ...
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
随机推荐
- MFC窗口显隐
使用SetLayeredWindowAttributes可以方便的制作透明窗体,此函数在w2k以上才支持,而且如果希望直接使用的话,可能需要下载最新的SDK.不过此函数在w2k的user32.dll里 ...
- Akka边学边写（4）-- MiniRPG
前面几篇文章用Akka写了HelloWorld和EchoServer,为了更进一步学习Akka,本文将会实现一个非常小的RPG游戏server:MiniRPG. 游戏逻辑 由于是迷你RPG,所以逻辑非 ...
- java文件处理 之 读写TXT（比之c++，重置文件头，int转string）
一:c/c++ 处理文件的使用方法.详见博客 c++文件操作 二:java与c++的方便之处: (1) java在读取文件时.能够对字符流进行处理,又一次进行编码,如 InputStreamReade ...
- HDU 4927 Series 1(推理+大数）
HDU 4927 Series 1 题目链接 题意:给定一个序列,要求不断求差值序列.直到剩一个,输出这个数字 思路:因为有高精度一步.所以要推理一下公式,事实上纸上模拟一下非常easy推出公式就是一 ...
- oracle_经常使用分组函数
oracle_经常使用分组函数 ①分组函数 1.max(column):求最大值,对数据类型没有要求,随意数据类型都能够 2.min(column):求最小值,对数据类型没有要求,随意数据类型都 ...
- PHP模拟链表操作
PHP模拟链表操作 一.总结 1.类成员用的是-> 2.对象节点相连的话,因为是对象,所以不用取地址符号 3.数组传递参数的时候传引用的方法 ,& 二.PHP模拟链表操作 代码一: /* ...
- Android 迭代器 Iteraor迭代器以及foreach的使用
Iterator是一个迭代器接口,专门用来迭代各种Collection集合,包括Set集合和List集合. Java要求各种集合都提供一个iteratot()方法,该方法返回一个Iterator用于遍 ...
- python3 turtle 画围棋棋盘
python3 环境 利用turtle模块画出 围棋棋盘 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan impor ...
- 微服务实战（四）：服务发现的可行方案以及实践案例 - DockOne.io
原文:微服务实战(四):服务发现的可行方案以及实践案例 - DockOne.io 这是关于使用微服务架构创建应用系列的第四篇文章.第一篇介绍了微服务架构的模式,讨论了使用微服务架构的优缺点.第二和第三 ...
- Codeforces 145A-Lucky Conversion(规律)
A. Lucky Conversion time limit per test 2 seconds memory limit per test 256 megabytes input standard ...