How to use LazyVGrid and LazyHGrid in SwiftUI
Tags: swift, swiftui
Published: 2020-08-06 20:19:17

---
title: How to use LazyVGrid and LazyHGrid in SwiftUI
published: true
description: 
tags: #swift #swiftUI
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>As of iOS 14, SwiftUI now gives developers two new UI components called <a href="https://developer.apple.com/documentation/swiftui/lazyvgrid">LazyVGrid</a> and <a href="https://developer.apple.com/documentation/swiftui/lazyhgrid">LazyHGrid</a>. <a href="https://developer.apple.com/documentation/swiftui/lazyvgrid">LazyVGrid</a> is used for creating vertical grids and <a href="https://developer.apple.com/documentation/swiftui/lazyhgrid">LazyHGrid</a> is used for horizontal grids. The keyword <strong>Lazy</strong> means that the grids view does not create items for the grid until they are needed to appear on screen. This allows our app to have much faster loading times when using grids! </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this post we are going to look at how to make a&nbsp;<strong>LazyVGrid</strong>. All the examples in this post can be applied to <strong>LazyHGrid</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are three things we need to make a <strong>LazyVGrid</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>We need a list of data to display </li><li>We need a <strong>GridItem</strong>. This defines how we want the layout to look </li><li>We need to choose if we want our grid to be vertical or horizontal </li></ol>
<!-- /wp:list -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">    private var gridLayout = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Above we are creating the <strong>gridLayout</strong> variable which is an array of <strong>GridItem</strong>'s. We will use this variable to set the layout we want for our grid. Later we will talk about the <strong>.flexible()</strong> but for now don't worry.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this example we want two columns in our grid. The more <strong>GridItem</strong>'s we add to the array will mean more columns of our data to be displayed on the screen. We can add as many columns as our display can handle but for this example we are going to use two columns. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next we need to add a <strong>ScrollView</strong> and our <strong>LazyVGrid</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">    private var gridLayout = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
        
        ScrollView {
            LazyVGrid(columns: gridLayout, spacing: 20) {
                ForEach((1...100), id: \.self) {
                    Text("\($0)")
                        .font(.title)
                        .foregroundColor(Color.white)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
                        .background(Color.red)
                }
            }
            .padding(.all, 10)
        }
    }
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>In the above code we are applying our <strong>gridLayout</strong> variable to our <strong>LazyVGrid</strong> with a spacing of 20. Then we are adding a ForEach statement that will display numbers in a text view from 1 to 100 and we added a little styling to the text view. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now if we run the code above we should get two columns of numbers in a vertical grid like in the image below. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":848,"width":293,"height":555,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/07/screen-shot-2020-07-31-at-5.34.42-pm.png?w=541" alt="" class="wp-image-848" width="293" height="555"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In the above example we used the <strong>flexible</strong> lazy grid style. This <strong>flexible</strong> style allows us to specify how big  we want each item to be and also lets us control of how many columns we want to display. There are two other types of grid styles called <strong>fixed</strong> and <strong>adaptive</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <strong>fixed</strong> grid type will make any of our column's fixed to a particular width size. To show this in an example we are going to run the same code as above but switch our first <strong>GridItem</strong> style. </p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">    private var gridLayout = [
        GridItem(.fixed(100)),
        GridItem(.flexible())
    ]
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":857,"width":293,"height":555,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/08/screen-shot-2020-08-02-at-2.48.36-pm.png?w=588" alt="" class="wp-image-857" width="293" height="555"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You can now see that our first <strong>GridItem</strong> in our grid will always have a <strong>fixed</strong> width of 100, while the <strong>flexible</strong> style on the second <strong>GridItem</strong> will take up the rest of the row space.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next we have the <strong>adaptive</strong> grid layout which will take a minimum width and display as many rows as it can on the screens layout.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">    private var gridLayout = [
        GridItem(.adaptive(minimum: 100)),
    ]
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":859,"width":293,"height":555,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/08/screen-shot-2020-08-02-at-2.53.55-pm.png?w=549" alt="" class="wp-image-859" width="293" height="555"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>All of these same methods for customizing <strong>LazyVGrid</strong> can be used when creating <strong>LazyHGrid</strong>. A reminder you can only use this style of lazy grids in apps supporting iOS 14 and above. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hope this helps you to be more lazy with your grids!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>😴🛌 Happy Coding 😴🛌</p>
<!-- /wp:paragraph -->