example

I have a grid of several items, and a category menu. I’d like specific grid items to show when a menu option is clicked. What are some straightforward ways I can achieve this?

Here’s is the code so far.

    <section class="py-10 py-lg-20 bg-bg-3">  
        <div class="container">
            <div class="row flex-md-row flex-column">
                <div class="col-lg-2 text-lg-start text-center mb-6 mb-lg-0" data-aos="fade-down" data-aos-delay="0">
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Plant                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Portrait                </a>
                    <img src="https://designmodo.com/startup/app/smiles.php?icon=smile&search=P2lkPTMwODMzJmluRWRpdG9yPTE=&path=L3N0YXJ0dXAvYXBwL3ByZXZpZXcucGhw&e=NjQyNzA=" id="js-get-smile" class="visually-hidden" style="opacity: 0.01;">
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Nature                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Technology                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Minimal                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Texture                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Colorful                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0 mb-lg-4">                    Architecture                </a>
                    <a href="#" class="font-heading text-dark-1 d-lg-block mx-2 mx-lg-0">                    Space                </a>
                </div>
                <div class="col-lg-10">
                    <div class="row justify-content-center justify-content-md-start">
                        <div class="col-sm-8 col-md-6 col-lg-4 mt-10 mt-md-0" data-aos="fade-down" data-aos-delay="250">
                            <div>
                                <a href="#" class="w-100">                            <img src="i/400x400-kickstart-arts.jpg" srcset="i/400x400-kickstart-arts.jpg 2x" alt="" class="img-fluid mb-4 w-100">                            </a>
                                <div class="row mb-2">
                                    <div class="col">
                                        <a href="#" class="font-heading text-dark-1 mb-0">Kickstart Arts</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8 col-md-6 col-lg-4 mt-10 mt-md-0" data-aos="fade-down" data-aos-delay="400">
                            <div>
                                <a href="#" class="w-100">                            <img src="i/400x400-qmuso.jpg" srcset="i/400x400-qmuso.jpg 2x" alt="" class="img-fluid mb-4 w-100">                            </a>
                                <a href="#" class="fs-5 text-dark-2">Description </a>
                            </div>
                        </div>
                        <div class="col-sm-8 col-md-6 col-lg-4 mt-10 mt-lg-0" data-aos="fade-down" data-aos-delay="500">
                            <div>
                                <a href="#" class="w-100">                            <img src="i/400x400-rhythm2recovery.jpg" srcset="i/400x400-rhythm2recovery.jpg 2x" alt="" class="img-fluid mb-4 w-100">                            </a>
                                <div class="row mb-2">
                                    <div class="col">
                                        <a href="#" class="font-heading text-dark-1 mb-0">Rhythm2Recovery</a>
                                    </div>
                                </div>
                                <a href="#" class="fs-5 text-dark-2">Description text </a>
                            </div>
                        </div>
                        <div class="col-sm-8 col-md-6 col-lg-4 mt-10" data-aos="fade-down" data-aos-delay="400">
                            <div>
                                <a href="#" class="w-100">                            <img src="i/400x400-cheep-trill.jpg" srcset="i/400x400-cheep-trill.jpg 2x" alt="" class="img-fluid mb-4 w-100">                            </a>
                                <div class="row mb-2">
                                    <div class="col">
                                        <a href="#" class="font-heading text-dark-1 mb-0">Cheep Trill</a>
                                    </div>
                                </div>
                                <a href="#" class="fs-5 text-dark-2">Description text </a>
                            </div>
                        </div>
                        <div class="col-sm-8 col-md-6 col-lg-4 mt-10" data-aos="fade-down" data-aos-delay="500">
                            <div>
                                <a href="#" class="w-100">                            <img src="i/400x400-club-weld.jpg" srcset="i/400x400-club-weld.jpg 2x" alt="" class="img-fluid mb-4 w-100">                            </a>
                                <div class="row mb-2">
                                    <div class="col">
                                        <a href="#" class="font-heading text-dark-1 mb-0">Club Weld and Sonic Sous Syndicate</a>
                                    </div>
                                </div>
                                <a href="#" class="fs-5 text-dark-2">Description text</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

I tried looking into triggering certain items to ‘hide’ or ‘show’ upon menu click, but haven’t quite cracked, nor am I sure that’s the right route.