From 89a99eb8ec86030f6444561a954687e76fec9886 Mon Sep 17 00:00:00 2001 From: gitpitch Date: Tue, 20 Oct 2020 09:35:29 +0100 Subject: [PATCH] Grid Layouts Flow Guide updated. --- docs/grid-layouts/flow.md | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/docs/grid-layouts/flow.md b/docs/grid-layouts/flow.md index 3c4f363..702fc45 100644 --- a/docs/grid-layouts/flow.md +++ b/docs/grid-layouts/flow.md @@ -17,7 +17,13 @@ Using a value of [col](#column-flow), [row](#row-flow), or [stack](#stack-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) @@ -25,7 +31,13 @@ When `flow=col` is activated block items are rendered vertically within the bloc ### 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) @@ -33,7 +45,13 @@ When `flow=col true` is activated block items are rendered vertically within the ### 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) @@ -41,7 +59,13 @@ When `flow=row` is activated block items are rendered horizontally within the bl ### 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)