obtain a 2 column grid of playing cards that increase right into a full display view when tapped upon?

I’m making an attempt to make a notes view the place the person notes can be displayed in a scrollable grid of two columns. I need to make it in order that if a be aware card is tapped upon, it opens the total be aware and takes over your complete display. I can not simply use withAnimation as a result of that accommodates the cardboard contained in the LazyVGrid that I’m utilizing. I attempted utilizing matchedGeometry as follows however that brings within the expanded view from the highest left as a substitute of increasing the cardboard.

struct CardView: View {
    
    let title: String
    
    let nameSpace: Namespace.ID
    
    var physique: some View {
        VStack() {
            Textual content(title)
                .font(.headline)
                .foregroundStyle(.white)
        }
        .body(width: 150, peak: 200)
        .background(.blue)
        .matchedGeometryEffect(id: "card", in: nameSpace)
    }
}

struct ExpandedCardView: View {
    
    let title: String
    
    let nameSpace: Namespace.ID
    
    let screenWidth = UIScreen.principal.bounds.width
    let screenHeight = UIScreen.principal.bounds.peak

    
    var physique: some View {
        
        VStack {
            Textual content(title)
                .font(.title)
                .foregroundStyle(.white)
        }
        .body(width: screenWidth, peak: screenHeight)
        .background(.blue)
        .matchedGeometryEffect(id: "card", in: nameSpace)
    }
}

struct ParentView: View {
    
    @State personal var cardExpanded: Bool = false
    @Namespace personal var nameSpace
    
    var physique: some View {
        
        ZStack {
            
            if (cardExpanded == false) {
                CardView(title: "It is a title", nameSpace: nameSpace)
                    .onTapGesture {
                        withAnimation {
                            cardExpanded.toggle()
                        }

                    }
            }
            else {
                ExpandedCardView(title: "It is a title", nameSpace: nameSpace)
                    .onTapGesture {
                        withAnimation {
                            cardExpanded.toggle()
                        }
                    }
                    .zIndex(1)
            }
        }
    }
}

I’m not positive find out how to make this work. The look I’m making an attempt to attain is just like how tabs look within the Safari app on iOS. Additionally it is just like how the Recordsdata app works on iOS. Following is an image of how the tabs look in Safari:

I actually appreciated the animation I obtained through the use of withAnimation however due to the cardboard not with the ability to escape the LazyVGrid, it did not work as meant. The code utilizing withAnimation is as follows:

struct CardView: View {
    @State var isExpanded: Bool = false
    let title: String
    
    let screenWidth = UIScreen.principal.bounds.width
    let screenHeight = UIScreen.principal.bounds.peak
    
    var physique: some View {
        VStack() {
            Textual content(title)
                .font(.headline)
                .scaleEffect(isExpanded ? 2 : 1)
                .foregroundColor(.white)
        }
        .body(
            width: isExpanded ? screenWidth : 150,
            peak: isExpanded ? screenHeight : 200
        )
        .background(Colour.blue)
        .zIndex(isExpanded ? 1 : 0)
        .onTapGesture {
            withAnimation {
                isExpanded.toggle()
            }
        }
    }
}

struct ParentView: View {
    
    personal let columns = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16)
    ]
    
    var physique: some View {
        
        ZStack {
            
            ScrollView {
                
                LazyVGrid(columns: columns) {
                    
                    ForEach(0..<20) { _ in
                        CardView(title: "It is a title")
                    }
                    
                }
            }
            
        }
        
    }
}

I’d admire if somebody might assist me perceive what’s appropriate structure to achieive that look that I’m making an attempt to.