[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 ...
随机推荐
- 如何在实际项目中使用Promise（入门级）
你们有没有遇到过这样的情况,ES6看过了,Promise的文字概念都懂,但是我要怎么在项目中去写一个Promise呢? 那天我就是带着这样的疑问去网上搜了下.最后成功地在项目中应用了Promise,只 ...
- 微信小程序简单常见首页demo
wxml <view class='index-contier'> <view class="index-left"> <view>电池剩余&l ...
- Mongodb总结3-稍微封装一下
上次发表的2,纯粹是Demo,演示API的用法. 今天,稍微封装了下,看得更清楚. 考虑到不容易做得很有通用性,所以封装的一般,换种场景需要直接修改代码,但是有一部分是可以复用的. 最近项目,很可能只 ...
- Android检测网络状态，判断当前网络是否可用
用户手机当前网络可用:WIFI.2G/3G网络,用户打开与不打开网络,和是否可以用是两码事.可以使用指的是:用户打开网络了并且可以连上互联网进行上网. 检测当前网络是否可用,代码如下: /** * 检 ...
- UVA 10391 - Compound Words 字符串hash
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- NPF
NPF是一个协议驱动.从性能方面来看,这不是最好的选择,但是它合理地独立于MAC层并且有权使用原始通信 (raw traffic).NPF是Winpcap的核心部分,它是Winpcap完成困难工作的组 ...
- 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
- amazeui页面分析3
amazeui页面分析3 一.总结 1. 本质是list列表,是ul套li的形式,只不过li里面是图片 <li class="am-g am-list-item-desced am-l ...
- /bin/bash^M: bad interpreter: 没有那个文件或文件夹
执行脚本时出现了这样一个错误,打开之后并没有找到所谓的^M,查了之后才知道原来是文件格式的问题,也就是linux和windows之间的不全然兼容... 详细细节无论,假设验证: vim test.sh ...
- 关于DMA
用串口在dma中发东西的时候,,, 要判断DMA里是不是由东西,是不是在占用 当多个外设再用DMA的时候,,,要查看DMA有没有占用 一包数没发完,不要再传另一包