Aligning titles, buttons and images using either grid or flexbox

Question

I have a bunch of items for sale in a paginated grid of 3x3 (max) products. I want to make the items align nicely and also have the rows striped - in this case the middle row will be in a full width black background. Each item has a picture and a title - the title varies in length and the pictures should align horizontally. I can't work out if I need flexbox or grid or both to solve this! Although I am using bootstrap 4 I am happy to change the markup and not use BS4 if easier.

Simplified HTML example:

.blackbg {
  background-color: #000;
  color: #fff;
}
img {
  display: block;
  max-width: 100%
}
h2 {
  text-align: center;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="wrap">
    
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="item">
                    <h2>A title that spans over 3 or 4 lines.</h2>
                    <img src="//via.placeholder.com/350x250" alt="">
                    <button>View Item</button>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <h2>A title that spans over 3 or 4 lines.</h2>
                    <img src="//via.placeholder.com/350x250" alt="">
                    <button>View Item</button>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <h2>A title that spans over 3 or 4 lines.</h2>
                    <img src="//via.placeholder.com/350x250" alt="">
                    <button>View Item</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid blackbg">
        <div class="row">
            <div class="col">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="item">
                                <h2>A shorter title</h2>
                                <img src="//via.placeholder.com/350x250" alt="">
                                <button>View Item</button>
                            </div>
                        </div>
                        <div class="col">
                            <div class="item">
                                <h2>A title that spans over 3 or 4 lines.</h2>
                                <img src="//via.placeholder.com/350x250" alt="">
                                <button>View Item</button>
                            </div>
                        </div>
                        <div class="col">
                            <div class="item">
                                <h2>A title that spans over 3 or 4 lines just add to the complexity.</h2>
                                <img src="//via.placeholder.com/350x250" alt="">
                                <button>View Item</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="item">
                    <h2>A title that spans over 3 or 4 lines.</h2>
                    <img src="//via.placeholder.com/350x250" alt="">
                    <button>View Item</button>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <h2>A title that spans over 3 or 4 lines.</h2>
                    <img src="//via.placeholder.com/350x250" alt="">
                    <button>View Item</button>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <h2>A title that spans over 3 or 4 lines.</h2>
                    <img src="//via.placeholder.com/350x250" alt="">
                    <button>View Item</button>
                </div>
            </div>
        </div>
    </div>

</div>