StarMirror/gitpitch
1
0
Fork 0
mirror of https://github.com/gitpitch/gitpitch.git synced 2024-04-18 07:30:55 +08:00
Code Issues Projects Releases Wiki Activity

Grid Layouts Flow Guide updated.

Browse Source
This commit is contained in:
gitpitch 2020-10-20 09:35:29 +01:00
parent 921079a2fd
commit 89a99eb8ec
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/grid-layouts/flow.md
View File

@ -17,7 +17,13 @@ Using a value of [col](#column-flow), [row](#row-flow), or [stack](#stack-flow)
### Column Flow ### Column Flow
When `flow=col` is activated block items are rendered vertically within the block. An equal amount of space is injected between each block item and at the start and end of the block. The following sample slide screenshot helps to clarify this concept. Note, the sample block height here is 100% of the slide height: When `flow=col` is activated the following layout and spacing behaviors occur within the block:
1. Block items are rendered vertically within the block.
2. An equal amount of space is injected between each block item
3. And an equal amount of space is injected at the start and end of the block.
The following sample slide screenshot helps to clarify this concept. Note, the sample block height here is 100% of the slide height:
![Sample slide demonstrating grid layouts column flow](../_images/gitpitch-grid-layouts-flow-col.png) ![Sample slide demonstrating grid layouts column flow](../_images/gitpitch-grid-layouts-flow-col.png)
@ -25,7 +31,13 @@ When `flow=col` is activated block items are rendered vertically within the bloc
### Column Flow with Push ### Column Flow with Push
When `flow=col true` is activated block items are rendered vertically within the block. An equal amount of space is injected between each block item, however no space is injected at the start and end of the block. This *pushes* your block items to the extreme ends of the block. The following sample slide screenshot helps to clarify this concept. Note, the sample block height here is 100% of the slide height: When `flow=col true` is activated the following layout and spacing behaviors occur within the block:
1. Block items are rendered vertically within the block.
2. An equal amount of space is injected between each block item.
3. However no space is injected at the start and end of the block.
This *pushes* your block items to the extreme ends of the block. The following sample slide screenshot helps to clarify this concept. Note, the sample block height here is 100% of the slide height:
![Sample slide demonstrating grid layouts column flow with push](../_images/gitpitch-grid-layouts-flow-col-push.png) ![Sample slide demonstrating grid layouts column flow with push](../_images/gitpitch-grid-layouts-flow-col-push.png)
@ -33,7 +45,13 @@ When `flow=col true` is activated block items are rendered vertically within the
### Row Flow ### Row Flow
When `flow=row` is activated block items are rendered horizontally within the block. An equal amount of space is injected between each block item and at the start and end of the block. The following sample slide screenshot helps to clarify this concept. Note, the sample block width here is 100% of the slide width: When `flow=row` is activated the following layout and spacing behaviors occur within the block:
1. Block items are rendered horizontally within the block.
2. An equal amount of space is injected between each block item
3. And an equal amount of space is injected at the start and end of the block.
The following sample slide screenshot helps to clarify this concept. Note, the sample block width here is 100% of the slide width:
![Sample slide demonstrating grid layouts row flow](../_images/gitpitch-grid-layouts-flow-row.png) ![Sample slide demonstrating grid layouts row flow](../_images/gitpitch-grid-layouts-flow-row.png)
@ -41,7 +59,13 @@ When `flow=row` is activated block items are rendered horizontally within the bl
### Row Flow with Push ### Row Flow with Push
When `flow=row true` is activated block items are rendered horizontally within the block. An equal amount of space is injected between each block item, however no space is injected at the start and end of the block. This *pushes* your block items to the extreme ends of the block. The following sample slide screenshot helps to clarify this concept. Note, the sample block width here is 100% of the slide width: When `flow=row true` is activated the following layout and spacing behaviors occur within the block:
1. Block items are rendered horizontally within the block.
2. An equal amount of space is injected between each block item
3. However no space is injected at the start or end of the block.
This *pushes* your block items to the extreme ends of the block. The following sample slide screenshot helps to clarify this concept. Note, the sample block width here is 100% of the slide width:
![Sample slide demonstrating grid layouts row flow with push](../_images/gitpitch-grid-layouts-flow-row-push.png) ![Sample slide demonstrating grid layouts row flow with push](../_images/gitpitch-grid-layouts-flow-row-push.png)