[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;
相关文章
- Maven报错:The packaging for this project did not assign a file to the build artifact[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 【错误记录】Flutter 编译报错 ( The parameter ‘‘ can‘t have a value of ‘null‘ because of its type, but the im )
- 【Vue-Spring跨域Bug已解决】has been blocked by CORS policy: The value of the······
- django2 The custom handler404 view 'users.views.page_not_found' does not take the correct number of
- ORA-01378: The logical block size (string) of file string is not compatible with the disk sector size (media sector size is string and host sector size is string) ORACLE 报错 故障修复 远程处理
- ORA-26747: The one-to-many transformation function string encountered the following error: string ORACLE 报错 故障修复 远程处理
- ORA-38407: The ADT associated with the attribute set already exists. ORACLE 报错 故障修复 远程处理
- ORA-48442: The control parameter number exceeds the maximum number [string] ORACLE 报错 故障修复 远程处理
- ORA-48463: The value buffer reached the maximum length [string] ORACLE 报错 故障修复 远程处理
- ORA-48490: The field number exceeds the maximum number [string] ORACLE 报错 故障修复 远程处理
- ORA-53254: The SOP INSTANCE UID for the new DICOM object is invalid. ORACLE 报错 故障修复 远程处理
- ORA-13621: The task_or object string is marked as a template and cannot perform the requested operation. ORACLE 报错 故障修复 远程处理
- ORA-13906: The tablespace is not of the right type. ORACLE 报错 故障修复 远程处理
- 修复 Ubuntu 中 “E: The package cache file is corrupted, it has the wrong hash”
- 行界面并掌握常用命令Note: The original prompt mentions 25character title but the provided Chinese alternative mentions 25word title. This response assumes the latter is the intended instruction.(怎样进入linux命令)
- The Power of the Hydra Oracle: Unlocking Potential(hydraoracle)
- Linux Goes Global: The Growing Popularity of the Operating System Abroad(linux国外)
- Oracle Achieves 100% Success: The Strongest Database System in the Market(oracle100)
- Exploring the Power of MongoDB: The Definitive Guide to Upgrading Arrays(mongodb更新数组)
- Exploring the Power of Linux: The Versatility and Potential of Aud Files(linux系统aud文件)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- 优化技巧 (Note The title provided by the AI is incomplete Heres a suggestion for a title that completes the phrase)
- 尝试攻克決勝難關The A to Z of Redis(the a什么redis)