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.
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.
cm is not a very useful unit when it comes to elements on a web page.
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?
The elements need one parent container which you then use flexbox or CSS grid on.
<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;
}
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.
grid-area: 1/1/1/5 this is what I was looking for but can I put divs and containers inside this grid area ?