[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 ...
随机推荐
- vuex-store模块化配置
一.目录结构: src -> js -> modules 1. 在modules下新建文件夹,文件夹名称按模块功能命名 如: modules ---- home -> homeMod ...
- slice深拷贝数组
var a = [1, 2, 3, 4] var b = a.slice(0) b[0] = 2 // a = [1, 2, 3, 4] // b = [2, 2, 3, 4]
- HDU4825 Xor Sum(贪心+Trie树）
Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...
- Linux的用户和组管理
1.用户和组 一个用户必须有一个主组 一个用户可以同时属于多个组 一个组可以拥有多个用户 用户信息存在: /etc/passwd 组信息存在:/etc/group 密码信息存在: /etc/shado ...
- Spider_lxml
xpath工具(解析) xpath 在XML文档中查找信息的语言,同样适用于HTML文档的检索 xpath辅助工具 Chrome插件 :XPath Helper 打开 :Ctrl + Shift + ...
- 学习笔记（四）：jQuery之动画效果
1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...
- python3中让程序暂停运行的语句
https://blog.csdn.net/zmz971751504/article/details/78288988
- 关于laravel框架分页报错的问题
因为laravel框架有自己的分页封装,所以与其他框架相比laravel框架的分页的实现要方便的多 只要分别在php脚本与视图中使用 $data=DB::table('index_pic')-> ...
- oracle_经常使用分组函数
oracle_经常使用分组函数 ①分组函数 1.max(column):求最大值,对数据类型没有要求,随意数据类型都能够 2.min(column):求最小值,对数据类型没有要求,随意数据类型都 ...
- maven插件介绍之tomcat7-maven-plugin
tomcat7-maven-plugin插件的pom.xml依赖为: <dependency> <groupId>org.apache.tomcat.maven</gro ...