admin管理员组文章数量:1122832
Obviously is something more complicated but i'd like a clear and simple description
I tried with grid and flexbox layout, setted "align-self: center" to the right box, but nothing happens, asked to ChatGPT and Perplexity too but I'm stuck.
I just want to display the third box (in a possible flex or grid layout of 3 box) in the right, centered in the middle of first and second left box.
This is the example code:
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 1.5rem;
}
.box {
background-color: #fff;
border: 2px solid #000;
}
.box1,
.box2 {
flex: 1 1 calc(60% - 1.5rem);
height: 250px;
}
.box3 {
flex: 1 1 calc(40% - 1.5rem);
height: 250px;
align-self: center;
}<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>Obviously is something more complicated but i'd like a clear and simple description
I tried with grid and flexbox layout, setted "align-self: center" to the right box, but nothing happens, asked to ChatGPT and Perplexity too but I'm stuck.
I just want to display the third box (in a possible flex or grid layout of 3 box) in the right, centered in the middle of first and second left box.
This is the example code:
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 1.5rem;
}
.box {
background-color: #fff;
border: 2px solid #000;
}
.box1,
.box2 {
flex: 1 1 calc(60% - 1.5rem);
height: 250px;
}
.box3 {
flex: 1 1 calc(40% - 1.5rem);
height: 250px;
align-self: center;
}<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>5 Answers
Reset to default 1CSS-Grid with five rows would be ideal. Each box spans two rows.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 1.5rem;
}
.box {
background-color: #fff;
border: 2px solid #000;
}
.box1,
.box2 {
grid-column: 1;
height: 100px;
}
.box1 {
grid-row: 1 /span 2;
}
.box2 {
grid-row: 3 /span 2;
}
.box3 {
grid-column: 2;
height: 100px;
grid-row: 2 / span 2;
}<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>The simplest solution you're looking for using flex could be as follows.
Have defined the height of the container and made flex changes to get the desired layout.
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
gap: 1.5rem;
height: 600px;
align-items: center;
justify-content: center;
}
.box {
background-color: #fff;
border: 2px solid #000;
}
.box1, .box2, .box3 {
height: 250px;
width: 50%;
}
.box3 {
align-self: center;
}<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>Hope, this helps.
My suggestion would be adding bootstrap to your file.
It would be more easy. Or else you can use the same classes in your css. But make sure you follow the same order for div's in order to use the same code structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
</head>
<body>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<style>
.box {
background-color: #fff;
border: 2px solid #000;
height: 250px;
}
</style>
<div class="container">
<div class="row">
<div class="d-flex">
<div class="col-6 p-2 d-grid">
<div class="box my-2 box1"></div>
<div class="box my-2 box2"></div>
</div>
<div class="col-6 p-2 d-grid">
<div class="box my-2 align-self-center box3"></div>
</div>
</div>
</div>
</div>
</body>
</html>Maybe you can do it with CSS grid, and adjust the max-width or the columns:
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1.5rem;
width: 100%;
}
.box {
background-color: #fff;
border: 2px solid #000;
height: 250px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
}
.box2 {
grid-column-start: 1;
grid-column-end: 4;
}
.box3 {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 3;
align-self: center;
}<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>in grid-template-columns, you can adjust the number for less or more size in the boxes, or you can do it with max-width too. I use grid-column-start and grid-column-end for better understanding of whats happening.
I hope that might help, it's my first time commenting in here. I think it was more practical to add the two layouts in the HTML, and I erased the box1, box2, box3 class since everything is applied to the layout:
- the first layout is a column with everything centered and two elements.
- in the second one there's only one centered element.
You can just give diferent widths or flex to the layout1 and 2 or to the boxes inside if you wanna see a different size :)
Hope that helps!
ps. in your case, trying to align with align-self won't work since there's only one row, and you can't make it go through those limits without using margins, which is definitely not recommended.
.container {
display: flex;
width: 100%;
gap: 1.5rem;
}
.layout1,.layout2{
display:flex;
flex: 1 1 50%;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}
.box {
width:100%;
height: 100px;
border: 2px solid black;
}<div class="container">
<div class="layout1">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="layout2">
<div class="box"></div>
</div>
</div>本文标签：
版权声明：本文标题：html - How can I insert a box between 2 rows? I don't want that box starts at the beginning of a row, I want that start 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736308529a1933693.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论