bootstrap 5 alpha 2 card deck example not showing like it is in documentation

Question

I inserted this example for a card desk and thought it would show like its shown in the docs. But it isn't.
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css - I am using Bootstrap 5 alpha 2. Has the card layout changed ?
It is showing as three rows instead of 1 row with 3 columns. Do we need to insert grid based HTML too wrapping the card-deck ?

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Answer 1

Use <div class="card-group"> and edit with grid format instead. Card-deck is not supported in Bootstrap 5.

Answer 2

To get a nice grid you can use this baseline. You have to use an extra div with a class col to get the nice spacing between columns.

<div class="row row-cols-1 row-cols-md-3 text-center">
      <div class="col">
        <div class="card">
             <div class="card-header">
              your header 1
            </div>
            <div class="card-body">
              your text 1
              <button type="button">Sign Up</button>
            </div>
            <div class="card-footer">
              your footer 1
            </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
            <div class="card-header">
              your header 2
            </div>
            <div class="card-body">
              your text 2
              <button type="button">Sign Up</button>
            </div>
            <div class="card-footer">
              your footer 2
            </div>
        </div>
      </div>
    </div>
  </section>