Css trouble with displaying divs

https://codepen.io/CaptainMakaveli/pen/QWjgWwq?editors=1000

How do I make this container 3 sit 2 cm next to container 2.
How do I make this container 5 sit 2 cm next to container 4.
How do I make this container 6 sit 2 cm next to container 7.

have you gone over the flexbox/grid sections? it would seem thats the sort of thing your looking for

I did but still can t place it next to it,like I imagined xd.

  1. cm is not a very useful unit when it comes to elements on a web page.

  2. Your description is confusing, I can’t tell what type of grid you want. Do you just want the boxes next to each other, or in a two-column three-row grid?

  3. The elements need one parent container which you then use flexbox or CSS grid on.

A quick auto grid
<div class="container">
  <div class=box>
    <h3>2</h3>
  </div>

  <div class=box>
    <h3>3</h3>
  </div>

  <div class=box>
    <h3>4</h3>
  </div>

  <div class=box>
    <h3>5</h3>
  </div>

  <div class=box>
    <h3>6</h3>
  </div>

  <div class=box>
    <h3>7</h3>
  </div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
 background: blue;
}

.box {
  margin: 0;
  background: red;
  border: 3px solid green;
  padding: 50px;
}

h3 {
  text-align: center;
}
Some links

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG
https://www.youtube.com/playlist?list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG


Just as an aside. You have 6 container classes all with the same style. The point of a class is that you can reuse the styles on multiple elements. You only need one class and you can give that class to as many elements as you’d like. Same with the text-align: center style, you are duplicating styles. Just group the selectors h1, h3 and give them the style.

1 Like

grid-area: 1/1/1/5 this is what I was looking for but can I put divs and containers inside this grid area ?