Sure! Here are some practical Bootstrap 5 Grid Examples to help you master layout building.

1. Basic 3-Column Layout

<div class="container">  <div class="row">    <div class="col">Column 1</div>    <div class="col">Column 2</div>    <div class="col">Column 3</div>  </div></div>

• Three equal-width columns

• Auto-layout, each takes equal space

2. Fixed Width Columns

<div class="container">  <div class="row">    <div class="col-4">4/12 width</div>    <div class="col-8">8/12 width</div>  </div></div>

3. Responsive Columns

<div class="container">  <div class="row">    <div class="col-sm-6 col-lg-4">Responsive col 1</div>    <div class="col-sm-6 col-lg-4">Responsive col 2</div>    <div class="col-sm-12 col-lg-4">Responsive col 3</div>  </div></div>

• On small devices (?576px), first two columns take half width each.

• On large devices (?992px), all three take one-third width.

• Last column spans full width on small screens.

4. Nesting Grid

<div class="container">  <div class="row">    <div class="col-8">      Main column (8/12)      <div class="row">        <div class="col-6">Nested col 1</div>        <div class="col-6">Nested col 2</div>      </div>    </div>    <div class="col-4">Sidebar (4/12)</div>  </div></div>

5. Using Offsets

<div class="container">  <div class="row">    <div class="col-4 offset-4">Centered column</div>  </div></div>

• Creates a centered column by offsetting it by 4 columns

6. Ordering Columns

<div class="container">  <div class="row">    <div class="col order-3">First visually but order 3</div>    <div class="col order-1">Second visually but order 1</div>    <div class="col order-2">Third visually but order 2</div>  </div></div>

7. No Gutters (Remove spacing between columns)

<div class="container">  <div class="row g-0">    <div class="col-6 bg-primary text-white">No gutter col 1</div>    <div class="col-6 bg-secondary text-white">No gutter col 2</div>  </div></div>

8. Vertical Alignment

<div class="container" style="height: 200px;">  <div class="row align-items-center" style="height: 100%;">    <div class="col bg-info">Vertically centered</div>    <div class="col bg-warning">Also centered</div>  </div></div>

If you'd like, I can provide a live example with code sandbox or explain how to combine grids with other Bootstrap components!