Add another css grid container/div below the first one

Question

I've been learning css grid, and I've tried to make a common layout. In this layout I want to add another container/div (basically a sidebar) just below the first one, tinkering around with it, I've managed to get it to the second row however it appears at the very bottom. How can I have it starting just below the first container?

Disclaimer: I'm only using bootstrap for some small stylings, I would prefer sticking to using css for the overall layout

.container {
  max-width: 1400px;
}

.text-gray {
  color: #c0c3c5;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.sidebar {
  border: 1px solid #ccc;
  border-radius: 4px;
  align-self: start;
  background: #fff;
  padding: 12px 8px;
}

.sidebar-two {
  border: 1px solid #00639e;
  grid-row: 2 / 3;
}

.right-bar {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  align-self: start;
}

.right-bar-two {
   grid-row: 2;
}

.content {
  grid-column: 2 / 4;
}

.content img {
  width: 100%;
  height: 200px;
}

.tags a {
  font-size: 0.75rem;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.7;
  font-weight: 400;
  text-transform: capitalize;
  color: #1a1a1b;
}

.tags a:hover {
  transition: 250ms ease;
  color: #00639e;
}

.sub-title {
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="grid-wrapper my-3">
    <div class="sidebar py-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 1</h1>
      <div class="tags d-flex flex-column">
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div class="sidebar-two py-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 2</h1>
      <div class="tags d-flex flex-column">
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
    <div class="content">
      <div class="featured-image">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="Featured banner">
      </div>
    </div>
    <div class="right-bar tags px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div class="right-bar right-bar-two tags px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>

Answer 1

You could make it way simpler with Flexbox or Bootstrap-Grid. The easiest way with CSS-Grid is either using grid-template-areas or hardcode their position with grid-column to move inside the right column.

.container {
  max-width: 1400px;
}

.text-gray {
  color: #c0c3c5;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.sidebar {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  padding: 12px 8px;
}

.right-bar {
  grid-row: 1 / 2;
}

/* selects all elements with a class that starts with sidebar and aligns them to the msot left column */
[class^="sidebar"] {
  grid-column: 1 / 2;
}

/* selects all elements that contain a class that starts with right-bar and aligns them to the most right column */
[class^="right-bar"] {
  grid-column: 4 / 5;
}

/* selects all classes that contain -two and places them to the 2nd row */
[class*="-two"] {
  grid-row: 2 / 3;
}

.sidebar-two {
  border: 1px solid #00639e;
}

.right-bar {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

.content {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.content img {
  width: 100%;
  height: 200px;
}

.tags a {
  font-size: 0.75rem;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.7;
  font-weight: 400;
  text-transform: capitalize;
  color: #1a1a1b;
}

.tags a:hover {
  transition: 250ms ease;
  color: #00639e;
}

.sub-title {
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="grid-wrapper my-3">
    <div class="sidebar py-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 1</h1>
      <div class="tags d-flex flex-column">
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div class="sidebar-two py-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 2</h1>
      <div class="tags d-flex flex-column">
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
    <div class="content">
      <div class="featured-image">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="Featured banner">
      </div>
    </div>
    <div class="right-bar tags px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div class="right-bar-two tags px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>