Add another css grid container/div below the first one-CodePudding

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 >
  <div >
    <div >
      <h1 >Sidebar Container 1</h1>
      <div >
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div >
      <h1 >Sidebar Container 2</h1>
      <div >
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
    <div >
      <div >
        <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 >
      <h1 >Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div >
      <h1 >Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>

CodePudding user response：

You can do it with either Bootstrap, Flexbox, or CSS grid.

Here I used CSS grid. Check following code:

.container {
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.text-gray {
  color: #c0c3c5;
}

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

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

.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 >
  <div >
    <div >
      <h1 >Sidebar Container 1</h1>
      <div >
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div >
      <h1 >Sidebar Container 2</h1>
      <div >
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
  </div>
  <div >
    <div >
      <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 >
    <div >
      <h1 >Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div >
      <h1 >Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <h1 >Sidebar Container 1</h1>
      <div >
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div >
      <h1 >Sidebar Container 2</h1>
      <div >
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
    <div >
      <div >
        <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 >
      <h1 >Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div >
      <h1 >Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>