From 48f0644c5e9f12ed4506aa41b12c9606873918ff Mon Sep 17 00:00:00 2001 From: Skyline-23 Date: Mon, 8 Jan 2024 20:58:46 +0900 Subject: [PATCH 01/11] Add gap function in Flex class --- Sources/Swift/FlexLayout.swift | 26 ++++++++++++++++++++++ Sources/YogaKit/include/YogaKit/YGLayout.h | 4 ++++ 2 files changed, 30 insertions(+) diff --git a/Sources/Swift/FlexLayout.swift b/Sources/Swift/FlexLayout.swift index 002bef81..a5e454e9 100644 --- a/Sources/Swift/FlexLayout.swift +++ b/Sources/Swift/FlexLayout.swift @@ -1213,6 +1213,26 @@ public final class Flex { return self } + // + // MARK: Gap + // + + /** + Set paddings between views. + */ + @discardableResult + public func setGap(_ gutter: Gutter, _ value: CGFloat) -> Flex { + switch gutter { + case .column: + yoga.columnGap = value + case .row: + yoga.rowGap = value + case .all: + yoga.gap = value + } + return self + } + // // MARK: UIView Visual properties // @@ -1416,6 +1436,12 @@ public final class Flex { case none } + public enum Gutter { + case column + case row + case all + } + /*public enum Overflow { /// Items that overflow case visible diff --git a/Sources/YogaKit/include/YogaKit/YGLayout.h b/Sources/YogaKit/include/YogaKit/YGLayout.h index fea1dd83..5ffb00e7 100644 --- a/Sources/YogaKit/include/YogaKit/YGLayout.h +++ b/Sources/YogaKit/include/YogaKit/YGLayout.h @@ -115,6 +115,10 @@ typedef NS_OPTIONS(NSInteger, YGDimensionFlexibility) { // Yoga specific properties, not compatible with flexbox specification @property(nonatomic, readwrite, assign) CGFloat aspectRatio; +@property(nonatomic, readwrite, assign) CGFloat columnGap; +@property(nonatomic, readwrite, assign) CGFloat rowGap; +@property(nonatomic, readwrite, assign) CGFloat gap; + /** Get the resolved direction of this node. This won't be YGDirectionInherit */ From 9dfd4c4204e12a0020c3a23e04cdbbcb3aa744f1 Mon Sep 17 00:00:00 2001 From: Skyline-23 Date: Tue, 9 Jan 2024 15:34:53 +0900 Subject: [PATCH 02/11] Add tests for setGap --- Tests/FlexLayoutTests/WidthSizeContentTests.swift | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Tests/FlexLayoutTests/WidthSizeContentTests.swift b/Tests/FlexLayoutTests/WidthSizeContentTests.swift index c3dd4945..28abe398 100644 --- a/Tests/FlexLayoutTests/WidthSizeContentTests.swift +++ b/Tests/FlexLayoutTests/WidthSizeContentTests.swift @@ -18,6 +18,7 @@ final class WidthSizeContentTests: XCTestCase { var viewController: UIViewController! var rootFlexContainer: UIView! var aView: UIView! + var bView: UIView! override func setUp() { super.setUp() @@ -29,6 +30,7 @@ final class WidthSizeContentTests: XCTestCase { viewController.view.addSubview(rootFlexContainer) aView = UIView() + bView = UIView() } func test_basis_adjust_aView_size_and_position() { @@ -159,4 +161,17 @@ final class WidthSizeContentTests: XCTestCase { rootFlexContainer.flex.layout() XCTAssertEqual(aView.frame, CGRect(x: 0.0, y: 0.0, width: 400.0, height: 200.0)) } + + func test_gap() { + rootFlexContainer.flex.direction(.row).define { flex in + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.alignItems(.start) + + flex.setGap(.row, 50) + } + + rootFlexContainer.flex.layout() + XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) + } } From ae3852cbeedf02966768a1f5941493f93a5bac73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=9C=ED=83=9D=ED=99=98?= Date: Tue, 9 Jan 2024 16:12:27 +0900 Subject: [PATCH 03/11] Add tests for setGap with .column and .all directions --- .../WidthSizeContentTests.swift | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/Tests/FlexLayoutTests/WidthSizeContentTests.swift b/Tests/FlexLayoutTests/WidthSizeContentTests.swift index 28abe398..326ab6e9 100644 --- a/Tests/FlexLayoutTests/WidthSizeContentTests.swift +++ b/Tests/FlexLayoutTests/WidthSizeContentTests.swift @@ -19,6 +19,7 @@ final class WidthSizeContentTests: XCTestCase { var rootFlexContainer: UIView! var aView: UIView! var bView: UIView! + var cView: UIView! override func setUp() { super.setUp() @@ -31,6 +32,7 @@ final class WidthSizeContentTests: XCTestCase { aView = UIView() bView = UIView() + cView = UIView() } func test_basis_adjust_aView_size_and_position() { @@ -162,7 +164,7 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(aView.frame, CGRect(x: 0.0, y: 0.0, width: 400.0, height: 200.0)) } - func test_gap() { + func test_gap_in_row_direction() { rootFlexContainer.flex.direction(.row).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) @@ -174,4 +176,35 @@ final class WidthSizeContentTests: XCTestCase { rootFlexContainer.flex.layout() XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) } + + func test_gap_in_column_direction() { + rootFlexContainer.flex.direction(.column).define { flex in + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.alignItems(.start) + + flex.setGap(.column, 50) + } + + rootFlexContainer.flex.layout() + XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) + } + + func test_gap_in_all_direction() { + rootFlexContainer.flex.direction(.column).define { flex in + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.addItem().direction(.row).define { flex in + flex.addItem(cView).height(100).width(100) + } + flex.alignItems(.start) + + flex.setGap(.all, 50) + } + + rootFlexContainer.flex.layout() + + XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) + XCTAssertEqual(cView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) + } } From 93433c3fd84efff402eefa0db9a8f02af07c4591 Mon Sep 17 00:00:00 2001 From: Skyline-23 Date: Tue, 9 Jan 2024 16:21:33 +0900 Subject: [PATCH 04/11] Add feature getGap --- Sources/Swift/FlexLayout.swift | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Sources/Swift/FlexLayout.swift b/Sources/Swift/FlexLayout.swift index a5e454e9..b7c08c2a 100644 --- a/Sources/Swift/FlexLayout.swift +++ b/Sources/Swift/FlexLayout.swift @@ -1217,6 +1217,18 @@ public final class Flex { // MARK: Gap // + /** + Get paddings between views. + */ + @discardableResult + public func getGap(_ gutter: Gutter) -> CGFloat { + switch gutter { + case .column: return yoga.columnGap + case .row: return yoga.rowGap + case .all: return yoga.gap + } + } + /** Set paddings between views. */ From 49d5607a519649b95881f5d2926a5cd149b734f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=9C=ED=83=9D=ED=99=98?= Date: Tue, 9 Jan 2024 17:20:56 +0900 Subject: [PATCH 05/11] Add tests for getGap --- .../WidthSizeContentTests.swift | 57 ++++++++++++++++++- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/Tests/FlexLayoutTests/WidthSizeContentTests.swift b/Tests/FlexLayoutTests/WidthSizeContentTests.swift index 326ab6e9..d3e75af2 100644 --- a/Tests/FlexLayoutTests/WidthSizeContentTests.swift +++ b/Tests/FlexLayoutTests/WidthSizeContentTests.swift @@ -164,7 +164,7 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(aView.frame, CGRect(x: 0.0, y: 0.0, width: 400.0, height: 200.0)) } - func test_gap_in_row_direction() { + func test_set_gap_in_row_direction() { rootFlexContainer.flex.direction(.row).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) @@ -177,7 +177,7 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) } - func test_gap_in_column_direction() { + func test_set_gap_in_column_direction() { rootFlexContainer.flex.direction(.column).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) @@ -190,7 +190,7 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) } - func test_gap_in_all_direction() { + func test_set_gap_in_all_direction() { rootFlexContainer.flex.direction(.column).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) @@ -207,4 +207,55 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) XCTAssertEqual(cView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) } + + func test_get_gap_in_row_direction() { + rootFlexContainer.flex.direction(.row).define { flex in + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.alignItems(.start) + + flex.setGap(.row, 20) + } + + rootFlexContainer.flex.layout() + + let rowGap = rootFlexContainer.flex.getGap(.row) + + XCTAssertEqual(rowGap, 20) + } + + func test_get_gap_in_column_direction() { + rootFlexContainer.flex.direction(.column).define { flex in + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.alignItems(.start) + + flex.setGap(.column, 20) + } + + rootFlexContainer.flex.layout() + + let columnGap = rootFlexContainer.flex.getGap(.column) + + XCTAssertEqual(columnGap, 20) + } + + func test_get_gap_in_all_direction() { + rootFlexContainer.flex.direction(.column).define { flex in + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.addItem().direction(.row).define { flex in + flex.addItem(cView).height(100).width(100) + } + flex.alignItems(.start) + + flex.setGap(.all, 20) + } + + rootFlexContainer.flex.layout() + + let allGap = rootFlexContainer.flex.getGap(.all) + + XCTAssertEqual(allGap, 20) + } } From 7196cb1c0b66ff6d3cefa1ace19f447a8de589ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=9C=ED=83=9D=ED=99=98?= Date: Tue, 9 Jan 2024 18:02:34 +0900 Subject: [PATCH 06/11] Update tests for getGap and setGap --- .../WidthSizeContentTests.swift | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/Tests/FlexLayoutTests/WidthSizeContentTests.swift b/Tests/FlexLayoutTests/WidthSizeContentTests.swift index d3e75af2..79de40b8 100644 --- a/Tests/FlexLayoutTests/WidthSizeContentTests.swift +++ b/Tests/FlexLayoutTests/WidthSizeContentTests.swift @@ -170,7 +170,7 @@ final class WidthSizeContentTests: XCTestCase { flex.addItem(bView).height(100).width(100) flex.alignItems(.start) - flex.setGap(.row, 50) + flex.setGap(.column, 50) } rootFlexContainer.flex.layout() @@ -183,7 +183,7 @@ final class WidthSizeContentTests: XCTestCase { flex.addItem(bView).height(100).width(100) flex.alignItems(.start) - flex.setGap(.column, 50) + flex.setGap(.row, 50) } rootFlexContainer.flex.layout() @@ -192,20 +192,21 @@ final class WidthSizeContentTests: XCTestCase { func test_set_gap_in_all_direction() { rootFlexContainer.flex.direction(.column).define { flex in - flex.addItem(aView).height(100).width(100) - flex.addItem(bView).height(100).width(100) flex.addItem().direction(.row).define { flex in - flex.addItem(cView).height(100).width(100) + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.setGap(.all, 50) } - flex.alignItems(.start) + flex.addItem(cView).height(100).width(100) + flex.alignItems(.start) flex.setGap(.all, 50) } rootFlexContainer.flex.layout() - XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) - XCTAssertEqual(cView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) + XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) + XCTAssertEqual(cView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) } func test_get_gap_in_row_direction() { @@ -242,16 +243,17 @@ final class WidthSizeContentTests: XCTestCase { func test_get_gap_in_all_direction() { rootFlexContainer.flex.direction(.column).define { flex in - flex.addItem(aView).height(100).width(100) - flex.addItem(bView).height(100).width(100) flex.addItem().direction(.row).define { flex in - flex.addItem(cView).height(100).width(100) + flex.addItem(aView).height(100).width(100) + flex.addItem(bView).height(100).width(100) + flex.setGap(.all, 20) } - flex.alignItems(.start) + flex.addItem(cView).height(100).width(100) + flex.alignItems(.start) flex.setGap(.all, 20) } - + rootFlexContainer.flex.layout() let allGap = rootFlexContainer.flex.getGap(.all) From fbc81da755fcf78915093242f7b254bd7e3a7925 Mon Sep 17 00:00:00 2001 From: Skyline-23 Date: Wed, 10 Jan 2024 00:34:50 +0900 Subject: [PATCH 07/11] Update document and comments of gap --- README.md | 14 ++++++++++++++ Sources/Swift/FlexLayout.swift | 12 ++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f8e11b1b..89733083 100644 --- a/README.md +++ b/README.md @@ -679,6 +679,20 @@ This property takes the same values as the width and height properties, and spec
+### gap +- Applies to: `flex containers` +- CSS name: `gap` + +**Method:** + +* **`setGap(_ gutter: Gutter, _value: CGFloat)`** +This property set distance between rows and columns. + +* **`getGap(_ gutter: Gutter)`** +This property return setted value through `setGap(_ gutter: Gutter, _value: CGFloat)` + +
+ ### isIncludedInLayout() - Applies to: `flex items` diff --git a/Sources/Swift/FlexLayout.swift b/Sources/Swift/FlexLayout.swift index b7c08c2a..bdd0d4a3 100644 --- a/Sources/Swift/FlexLayout.swift +++ b/Sources/Swift/FlexLayout.swift @@ -1218,7 +1218,10 @@ public final class Flex { // /** - Get paddings between views. + Get setted value through func `setGap(_ gutter: Gutter, _ value: CGFloat)`. + + - Parameter gutter: directions + - Returns: distance */ @discardableResult public func getGap(_ gutter: Gutter) -> CGFloat { @@ -1230,7 +1233,12 @@ public final class Flex { } /** - Set paddings between views. + Set distance between rows and columns. + + - Parameters: + - gutter: directions + - value: distance + - Returns: flex interface */ @discardableResult public func setGap(_ gutter: Gutter, _ value: CGFloat) -> Flex { From 70afd70dab3f9323113d49a7c1c5e171c4800184 Mon Sep 17 00:00:00 2001 From: Taekhwan Han Date: Thu, 11 Jan 2024 16:38:49 +0900 Subject: [PATCH 08/11] Separated setGap and remove getGap --- Sources/Swift/FlexLayout.swift | 51 ++++++++++++++++------------------ 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/Sources/Swift/FlexLayout.swift b/Sources/Swift/FlexLayout.swift index bdd0d4a3..e21ebe45 100644 --- a/Sources/Swift/FlexLayout.swift +++ b/Sources/Swift/FlexLayout.swift @@ -1216,40 +1216,43 @@ public final class Flex { // // MARK: Gap // + + /** + Set distance between columns. + + - Parameters: + - value: distance + - Returns: flex interface + */ + @discardableResult + public func columnGap(_ value: CGFloat) -> Flex { + yoga.columnGap = value + return self + } /** - Get setted value through func `setGap(_ gutter: Gutter, _ value: CGFloat)`. + Set distance between rows. - - Parameter gutter: directions - - Returns: distance + - Parameters: + - value: distance + - Returns: flex interface */ @discardableResult - public func getGap(_ gutter: Gutter) -> CGFloat { - switch gutter { - case .column: return yoga.columnGap - case .row: return yoga.rowGap - case .all: return yoga.gap - } + public func rowGap(_ value: CGFloat) -> Flex { + yoga.rowGap = value + return self } - + /** - Set distance between rows and columns. + Set distance between both of rows and columns. - Parameters: - - gutter: directions - value: distance - Returns: flex interface */ @discardableResult - public func setGap(_ gutter: Gutter, _ value: CGFloat) -> Flex { - switch gutter { - case .column: - yoga.columnGap = value - case .row: - yoga.rowGap = value - case .all: - yoga.gap = value - } + public func gap(_ value: CGFloat) -> Flex { + yoga.gap = value return self } @@ -1456,12 +1459,6 @@ public final class Flex { case none } - public enum Gutter { - case column - case row - case all - } - /*public enum Overflow { /// Items that overflow case visible From 2341f8a96dccfffc78215d4398974295175864a7 Mon Sep 17 00:00:00 2001 From: Taekhwan Han Date: Thu, 11 Jan 2024 16:48:21 +0900 Subject: [PATCH 09/11] Update tests for gap and remove tests for getGap --- .../WidthSizeContentTests.swift | 66 ++----------------- 1 file changed, 7 insertions(+), 59 deletions(-) diff --git a/Tests/FlexLayoutTests/WidthSizeContentTests.swift b/Tests/FlexLayoutTests/WidthSizeContentTests.swift index 79de40b8..9baf2a70 100644 --- a/Tests/FlexLayoutTests/WidthSizeContentTests.swift +++ b/Tests/FlexLayoutTests/WidthSizeContentTests.swift @@ -164,43 +164,43 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(aView.frame, CGRect(x: 0.0, y: 0.0, width: 400.0, height: 200.0)) } - func test_set_gap_in_row_direction() { + func test_row_gap() { rootFlexContainer.flex.direction(.row).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) flex.alignItems(.start) - flex.setGap(.column, 50) + flex.columnGap(50) } rootFlexContainer.flex.layout() XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) } - func test_set_gap_in_column_direction() { + func test_column_gap() { rootFlexContainer.flex.direction(.column).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) flex.alignItems(.start) - flex.setGap(.row, 50) + flex.rowGap(50) } rootFlexContainer.flex.layout() XCTAssertEqual(bView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) } - func test_set_gap_in_all_direction() { + func test_gap() { rootFlexContainer.flex.direction(.column).define { flex in flex.addItem().direction(.row).define { flex in flex.addItem(aView).height(100).width(100) flex.addItem(bView).height(100).width(100) - flex.setGap(.all, 50) + flex.gap(50) } flex.addItem(cView).height(100).width(100) flex.alignItems(.start) - flex.setGap(.all, 50) + flex.gap(50) } rootFlexContainer.flex.layout() @@ -208,56 +208,4 @@ final class WidthSizeContentTests: XCTestCase { XCTAssertEqual(bView.frame, CGRect(x: 150.0, y: 0.0, width: 100.0, height: 100.0)) XCTAssertEqual(cView.frame, CGRect(x: 0.0, y: 150.0, width: 100.0, height: 100.0)) } - - func test_get_gap_in_row_direction() { - rootFlexContainer.flex.direction(.row).define { flex in - flex.addItem(aView).height(100).width(100) - flex.addItem(bView).height(100).width(100) - flex.alignItems(.start) - - flex.setGap(.row, 20) - } - - rootFlexContainer.flex.layout() - - let rowGap = rootFlexContainer.flex.getGap(.row) - - XCTAssertEqual(rowGap, 20) - } - - func test_get_gap_in_column_direction() { - rootFlexContainer.flex.direction(.column).define { flex in - flex.addItem(aView).height(100).width(100) - flex.addItem(bView).height(100).width(100) - flex.alignItems(.start) - - flex.setGap(.column, 20) - } - - rootFlexContainer.flex.layout() - - let columnGap = rootFlexContainer.flex.getGap(.column) - - XCTAssertEqual(columnGap, 20) - } - - func test_get_gap_in_all_direction() { - rootFlexContainer.flex.direction(.column).define { flex in - flex.addItem().direction(.row).define { flex in - flex.addItem(aView).height(100).width(100) - flex.addItem(bView).height(100).width(100) - flex.setGap(.all, 20) - } - flex.addItem(cView).height(100).width(100) - - flex.alignItems(.start) - flex.setGap(.all, 20) - } - - rootFlexContainer.flex.layout() - - let allGap = rootFlexContainer.flex.getGap(.all) - - XCTAssertEqual(allGap, 20) - } } From bbc7a11db628ee84ddb0e89362f5a362bc74c703 Mon Sep 17 00:00:00 2001 From: Skyline-23 Date: Thu, 11 Jan 2024 17:11:40 +0900 Subject: [PATCH 10/11] Update README.md --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index cefc3e2e..620107db 100644 --- a/README.md +++ b/README.md @@ -687,11 +687,14 @@ This property takes the same values as the width and height properties, and spec **Method:** -* **`setGap(_ gutter: Gutter, _value: CGFloat)`** -This property set distance between rows and columns. +* **`columnGap(_ value: CGFloat)`** +This property set distance between columns. -* **`getGap(_ gutter: Gutter)`** -This property return setted value through `setGap(_ gutter: Gutter, _value: CGFloat)` +* **`rownGap(_ value: CGFloat)`** +This property set distance between rows. + +* **`gap(_ value: CGFloat)`** +This property set distance between both of rows and columns.
From e72a228b302b5980763c8c03e3104bc681c4928d Mon Sep 17 00:00:00 2001 From: Buseong Kim Date: Thu, 11 Jan 2024 20:25:15 +0900 Subject: [PATCH 11/11] Update README.md Co-authored-by: Ray (Kanghoon Oh) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 620107db..60df48e8 100644 --- a/README.md +++ b/README.md @@ -690,7 +690,7 @@ This property takes the same values as the width and height properties, and spec * **`columnGap(_ value: CGFloat)`** This property set distance between columns. -* **`rownGap(_ value: CGFloat)`** +* **`rowGap(_ value: CGFloat)`** This property set distance between rows. * **`gap(_ value: CGFloat)`**