{"componentChunkName":"component---src-templates-article-js","path":"/article/lazyvgrid-and-lazyhgrid-overview","result":{"data":{"contentfulArticle":{"title":"LazyVGrid & LazyHGrid Overview","image":"https://res.cloudinary.com/liquidcoder/image/upload/v1615282157/Blog/LazyVHGridOverview/scc9uf8naazenau1ofav.jpg","createdDate":"Tuesday, 09 March 2021","videoUrl":null,"updatedDate":"2 years ago","isNewLayout":true,"previews":{"previews":"{\n\t\"LazyVHGrid3\":[\"https://res.cloudinary.com/liquidcoder/image/upload/v1614684998/Blog/LazyVHGridOverview/prvgzsgyk83yhweaun3t.gif\"],\n\t\"LazyVHGrid4\":[\"https://res.cloudinary.com/liquidcoder/image/upload/v1614688245/Blog/LazyVHGridOverview/wy4urj4cxkpngakblu47.gif\"],\n\t\"LazyVHGrid6\":[\"https://res.cloudinary.com/liquidcoder/image/upload/v1614770711/Blog/LazyVHGridOverview/x5fki1blptsljsua53ze.gif\"],\n\t\"LazyVHGrid8\":[\"https://res.cloudinary.com/liquidcoder/image/upload/v1614877268/Blog/LazyVHGridOverview/pyic8xmos21squrwvdhb.gif\"],\n\t\"LazyVHGrid9\":[\"https://res.cloudinary.com/liquidcoder/image/upload/v1615278045/Blog/LazyVHGridOverview/bkao6xwubufwbn25n1rc.png\"]\n}"},"slug":"lazyvgrid-and-lazyhgrid-overview","author":{"email":"john@liquidcoder.com","name":"John"},"tags":[{"title":"Swift UI"}],"allChapters":null,"code":{"childMdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid1\\n\\ninit(GridItem.Size, spacing: CGFloat?, alignment: Alignment?)\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid3\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nextension HorizontalAlignment {\\n\\n    ...\\n}\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var columns: [GridItem] = [GridItem(.fixed(100))]\\n    @State var alignment: HorizontalAlignment = .center\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack { ... }\\n\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns, alignment: alignment) {\\n                    ForEach((0..<79), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .frame(height: 100)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n\\n            HStack { ... }\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid4\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nextension VerticalAlignment {\\n\\n    ...\\n}\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var rows: [GridItem] = [GridItem(.fixed(100)) ]\\n    @State var alignment: VerticalAlignment = .center\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack { ... }\\n\\n            // highlight-start\\n            ScrollView(.horizontal) {\\n                LazyHGrid(rows: rows, alignment: alignment) {\\n                    ForEach((0..<79), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .frame(width: 100)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n\\n            HStack { ... }\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid5\\n\\ncase flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity)\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid6\\n// $$liquidcoderFilename-ContentView\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var columns: [GridItem] = [GridItem(.flexible())]\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack {\\n                Text(\\\"# of gridItems: \\\")\\n                    + Text(\\\"\\\\(columns.count)\\\")\\n                    .bold()\\n                    .foregroundColor(.blue)\\n\\n            }\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns) {\\n                    ForEach((0..<100), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .foregroundColor( i.isMultiple(of: 2) ? .blue : .yellow)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n            HStack {\\n                Button(action: {\\n                    columns.append(GridItem(.flexible()))\\n                }, label: {\\n                    Text(\\\"Add Fixed GridItem\\\")\\n                            .padding()\\n                            .background(Color.blue)\\n                            .foregroundColor(.white)\\n                })\\n            }\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid8\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var columns: [GridItem] = [GridItem(.adaptive(minimum: 10))]\\n    // highlight-end\\n\\n    // highlight-start\\n    @State private var min = 10\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack {\\n                Text(\\\"Minimum \\\")\\n                    + Text(\\\"\\\\(min)\\\")\\n                    .bold()\\n                    .foregroundColor(.blue)\\n\\n            }\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns) {\\n                    ForEach((0..<100), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .foregroundColor( i.isMultiple(of: 2) ? .blue : .yellow)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n            HStack {\\n                Button(action: {\\n                    min += 10\\n                    columns = [GridItem(.adaptive(minimum: CGFloat(min)))]\\n                }, label: {\\n                    Text(\\\"Add Fixed GridItem\\\")\\n                            .padding()\\n                            .background(Color.blue)\\n                            .foregroundColor(.white)\\n                })\\n            }\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid9\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    var columns: [GridItem] = [GridItem(.adaptive(minimum: 30)), GridItem(.fixed(70)), GridItem(.flexible())]\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns) {\\n                    ForEach((0..<100), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .foregroundColor( i.isMultiple(of: 2) ? .blue : .yellow)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n        }\\n    }\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"explanation":{"childMdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"div\", {\n    id: \"LazyVHGridIntro-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Introduction\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Container views that arrange its child views in a grid that grows vertically or horizontally respectively, creating items only as needed.\\\"\")), mdx(\"p\", null, \"Creating views as needed means that only views that are a visible or are about to be visible will be created, so if you are scrolling through a long list of items, views will not be created at the same, only the ones that need to be display at that  particular time.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" will eventually replace UIKit's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"UICollectionView\"), \", but for now they are still not as powerful.\")), mdx(\"div\", {\n    id: \"LazyVHGrid1-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"GridItems\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"A description of a single grid item, such as a row or a column.\\\"\")), mdx(\"p\", null, \"GridItems describe how items of a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" will be laid out and which size each of them will have.\")), mdx(\"div\", {\n    id: \"LazyVHGrid2-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Fixed Size GridItem With LazyVGrid\"), mdx(\"p\", null, \"Fixed gridItems (columns) will keep the same size no matter how many of them you add in a grid which will make them overflow if they don't fit along the opposite axis. Use fixed items if you know that the size of the content inside them will stay constant.\")), mdx(\"div\", {\n    id: \"LazyVHGrid3-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" uses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"HorizontalAlignment\"), \" meaning they can only be aligned along the x-axis as you can see in the preview.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note: Using a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" makes the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"100\"), \" value in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".fixed\"), \" size be the width, hence the need to set the height on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Rectangle\"), \" inside the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ForEach\"), \".\"))), mdx(\"div\", {\n    id: \"LazyVHGrid4-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Fixed Size GridItem With LazyHGrid\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" uses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"VerticalAlignment\"), \" meaning they can only be aligned along the y-axis as you can see in the preview.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note: Using a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" makes the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"100\"), \" value in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".fixed\"), \" size be the height, hence the need to set the width on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Rectangle\"), \" inside the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ForEach\"), \".\")), mdx(\"p\", null, \"This is the opposite of what we have done with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"))), mdx(\"div\", {\n    id: \"LazyVHGrid5-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Flexible Size GridItem\"), mdx(\"p\", null, \"Flexible size is  the same as fixed in such a way that the number of rows or columns is equal to the count of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"GridItem\"), \" array. However, the width of each column or height of each row will fill the available space, unless you specify a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"minimum\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maximum\"), \" thresholds.\")), mdx(\"div\", {\n    id: \"LazyVHGrid6-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"As you can see when we only have 1 column, each item fill the entire width, but as soon as we start adding grid items to the array, the entire width is divided equally to accommodate each item.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Use this size if you know exactly how many rows or columns you will have.\"))), mdx(\"div\", {\n    id: \"LazyVHGrid7-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Adaptive Size GridItem\"), mdx(\"p\", null, \"With \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"adaptive\"), \" size, you don't need mulitple gridItems to have multiple columns or rows, you just need an array with a single item, and play with the minimum and maximum values. \")), mdx(\"div\", {\n    id: \"LazyVHGrid8-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"The grid will create as many columns or rows depending if it's a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" or a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" respectively as possible, and the width of each column or height of each row will depend on the content that each column and row contains.\")), mdx(\"div\", {\n    id: \"LazyVHGrid9-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Mixing sizes\"), mdx(\"p\", null, \"You can also mix multiple different sizes to fit your needs.\")), mdx(\"div\", {\n    id: \"LazyVHGridOutro-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"Grids in swiftUI are very powerful seeing that it's still only their first iteration which makes me wonder what type of magic will we get from them in future versions of swiftUI? The only thing I can say is that the future brighter guys. Happy coding!!!\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"downloads":null,"resources":[{"name":"Apple developer documentation","url":"https://developer.apple.com/documentation/swiftui/lazyvgrid"},{"name":"SwiftUI - GridLayout","url":"https://www.appcoda.com/learnswiftui/swiftui-gridlayout.html"},{"name":"Impossible grids in swiftUI","url":"https://swiftui-lab.com/impossible-grids/"}],"body":{"childMdx":{"tableOfContents":{"items":[{"url":"#introduction","title":"Introduction"},{"url":"#griditems","title":"GridItems"},{"url":"#fixed-size-griditem-with-lazyvgrid","title":"Fixed Size GridItem With LazyVGrid"},{"url":"#fixed-size-griditem-with-lazyhgrid","title":"Fixed Size GridItem With LazyHGrid"},{"url":"#flexible-size-griditem","title":"Flexible Size GridItem"},{"url":"#adaptive-size-griditem","title":"Adaptive Size GridItem"},{"url":"#mixing-sizes","title":"Mixing sizes"}]},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Introduction\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Container views that arrange its child views in a grid that grows vertically or horizontally respectively, creating items only as needed.\\\"\")), mdx(\"p\", null, \"Creating views as needed means that only views that are a visible or are about to be visible will be created, so if you are scrolling through a long list of items, views will not be created at the same, only the ones that need to be display at that  particular time.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" will eventually replace UIKit's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"UICollectionView\"), \", but for now they are still not as powerful.\"), mdx(\"h2\", null, \"GridItems\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"A description of a single grid item, such as a row or a column.\\\"\")), mdx(\"p\", null, \"GridItems describe how items of a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" will be laid out and which size each of them will have.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid1\\n\\ninit(GridItem.Size, spacing: CGFloat?, alignment: Alignment?)\\n\")), mdx(\"h2\", null, \"Fixed Size GridItem With LazyVGrid\"), mdx(\"p\", null, \"Fixed gridItems (columns) will keep the same size no matter how many of them you add in a grid which will make them overflow. Use fixed items if you know that the size of the content inside them will stay constant.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" uses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"HorizontalAlignment\"), \" meaning they can only be aligned along the x-axis as you can see in the preview.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note: Using a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" makes the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"100\"), \" value in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".fixed\"), \" size be the width, hence the need to set the height on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Rectangle\"), \" inside the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ForEach\"), \".\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nextension HorizontalAlignment {\\n\\n    ...\\n}\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var columns: [GridItem] = [GridItem(.fixed(100))]\\n    @State var alignment: HorizontalAlignment = .center\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack { ... }\\n\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns, alignment: alignment) {\\n                    ForEach((0..<79), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .frame(height: 100)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n\\n            HStack { ... }\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614684998/Blog/LazyVHGridOverview/prvgzsgyk83yhweaun3t.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614684998/Blog/LazyVHGridOverview/prvgzsgyk83yhweaun3t.gif\"\n  }))), mdx(\"h2\", null, \"Fixed Size GridItem With LazyHGrid\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" uses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"VerticalAlignment\"), \" meaning they can only be aligned along the y-axis as you can see in the preview.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note: Using a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" makes the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"100\"), \" value in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".fixed\"), \" size be the height, hence the need to set the width on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Rectangle\"), \" inside the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ForEach\"), \".\")), mdx(\"p\", null, \"This is the opposite of what we have done with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nextension VerticalAlignment {\\n\\n    ...\\n}\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var rows: [GridItem] = [GridItem(.fixed(100)) ]\\n    @State var alignment: VerticalAlignment = .center\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack { ... }\\n\\n            // highlight-start\\n            ScrollView(.horizontal) {\\n                LazyHGrid(rows: rows, alignment: alignment) {\\n                    ForEach((0..<79), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .frame(width: 100)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n\\n            HStack { ... }\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614688245/Blog/LazyVHGridOverview/wy4urj4cxkpngakblu47.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614688245/Blog/LazyVHGridOverview/wy4urj4cxkpngakblu47.gif\"\n  }))), mdx(\"h2\", null, \"Flexible Size GridItem\"), mdx(\"p\", null, \"Flexible size is  the same as fixed in such a way that the number of rows or columns is equal to the count of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"GridItem\"), \" array. However, the width of each column or height of each row will fill the available space, unless you specify a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"minimum\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maximum\"), \" thresholds.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid5\\n\\ncase flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity)\\n\")), mdx(\"p\", null, \"As you can see when we only have 1 column, each item fill the entire width, but as soon as we start adding grid items to the array, the entire width is divided equally to accommodate each item.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Use this size if you know exactly how many rows or columns you will have.\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid6\\n// $$liquidcoderFilename-ContentView\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var columns: [GridItem] = [GridItem(.flexible())]\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack {\\n                Text(\\\"# of gridItems: \\\")\\n                    + Text(\\\"\\\\(columns.count)\\\")\\n                    .bold()\\n                    .foregroundColor(.blue)\\n\\n            }\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns) {\\n                    ForEach((0..<100), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .foregroundColor( i.isMultiple(of: 2) ? .blue : .yellow)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n            HStack {\\n                Button(action: {\\n                    columns.append(GridItem(.flexible()))\\n                }, label: {\\n                    Text(\\\"Add Fixed GridItem\\\")\\n                            .padding()\\n                            .background(Color.blue)\\n                            .foregroundColor(.white)\\n                })\\n            }\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614770711/Blog/LazyVHGridOverview/x5fki1blptsljsua53ze.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614770711/Blog/LazyVHGridOverview/x5fki1blptsljsua53ze.gif\"\n  }))), mdx(\"h2\", null, \"Adaptive Size GridItem\"), mdx(\"p\", null, \"With \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"adaptive\"), \" size, you don't need mulitple gridItems to have multiple columns or rows, you just need an array with a single item, and play with the minimum and maximum values. \"), mdx(\"p\", null, \"The grid will create as many columns or rows depending if it's a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyVGrid\"), \" or a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LazyHGrid\"), \" respectively as possible, and the width of each column or height of each row will depend on the content that each column and row contains.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid8\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State var columns: [GridItem] = [GridItem(.adaptive(minimum: 10))]\\n    // highlight-end\\n\\n    // highlight-start\\n    @State private var min = 10\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            HStack {\\n                Text(\\\"Minimum \\\")\\n                    + Text(\\\"\\\\(min)\\\")\\n                    .bold()\\n                    .foregroundColor(.blue)\\n\\n            }\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns) {\\n                    ForEach((0..<100), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .foregroundColor( i.isMultiple(of: 2) ? .blue : .yellow)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n            HStack {\\n                Button(action: {\\n                    min += 10\\n                    columns = [GridItem(.adaptive(minimum: CGFloat(min)))]\\n                }, label: {\\n                    Text(\\\"Add Fixed GridItem\\\")\\n                            .padding()\\n                            .background(Color.blue)\\n                            .foregroundColor(.white)\\n                })\\n            }\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614877268/Blog/LazyVHGridOverview/pyic8xmos21squrwvdhb.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614877268/Blog/LazyVHGridOverview/pyic8xmos21squrwvdhb.gif\"\n  }))), mdx(\"h2\", null, \"Mixing sizes\"), mdx(\"p\", null, \"You can also mix multiple different sizes to fit your needs.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-LazyVHGrid9\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    var columns: [GridItem] = [GridItem(.adaptive(minimum: 30)), GridItem(.fixed(70)), GridItem(.flexible())]\\n    // highlight-end\\n\\n    var body: some View {\\n        VStack {\\n            // highlight-start\\n            ScrollView {\\n                LazyVGrid(columns: columns) {\\n                    ForEach((0..<100), id: \\\\.self) { i in\\n                        Rectangle()\\n                            .foregroundColor( i.isMultiple(of: 2) ? .blue : .yellow)\\n                    }\\n                }.font(.largeTitle)\\n            }\\n            // highlight-end\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1615278045/Blog/LazyVHGridOverview/bkao6xwubufwbn25n1rc.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1615278045/Blog/LazyVHGridOverview/bkao6xwubufwbn25n1rc.png\"\n  }))), mdx(\"p\", null, \"Grids in swiftUI are very powerful seeing that it's still only their first iteration which makes me wonder what type of magic will we get from them in future versions of swiftUI? The only thing I can say is that the future brighter guys. Happy coding!!!\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Introduction Apple says: \"Container views that arrange its child views in a grid that grows vertically or horizontally respectively, creating items only as needed.\" Creating views as needed means that only views that are a visible or are about to be visible will be created, so if you are scrolling…"}}}},"pageContext":{"slug":"lazyvgrid-and-lazyhgrid-overview"}},"staticQueryHashes":["1047155515","1278771865","2517639938","2517639938","2537039069","3452127246","3566879862","3891201089","439617394","670651827"]}