Используя flexbox, я пробовал сетку с несколькими типами квадратов.
Моя проблема в том, что когда я уменьшаю размер экрана для проверки отзывчивости, квадраты в нижней строке не совпадают с квадратами на верхняя строка.
Может кто-нибудь помочь мне выровнять все квадраты?
DEMO
. html
<div class="container-fluid" style="padding-left:0; height: 98vh;">
<div class="row" style="height:100%; width:100%">
<div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<div class="d-flex" style="justify-content: space-between; display:flex; overflow-x:auto">
asda
</div>
</div>
</div>
<div style="display:flex" class="divh">
<div style="justify-content: flex-start; display: flex; flex-direction:column" class="mn">
<div class="card card21">
<div class="card-body">
<p class="card-text">2aasasddsd</p>
</div>
</div>
<div class="card card21" style="margin-top: 16px;">
<div class="card-body">
<p class="card-text">3asd</p>
</div>
</div>
</div>
<div class="card card11" style="height:100%">
<div class="card-body">
<p class="card-text">7asd</p>
</div>
</div>
<div class="card card11" style="height:100%">
<div class="card-body">
<p class="card-text">7asd</p>
</div>
</div>
</div>
<div style="display:flex" class="divh">
<div class="card card12 mn11" style="height:100%">
<div class="card-body">
<p class="card-text">77asd</p>
</div>
</div>
<div class="card card13 mn12" style="height:100%">
<div class="card-body">
<p class="card-text">7assd</p>
</div>
</div>
<div style="justify-content: flex-start; display: flex; flex-direction:column" class="mn1">
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">71asd</p>
</div>
</div>
<div class="card card4" style="height:100%;margin-top: 16px;">
<div class="card-body">
<p class="card-text">72asd</p>
</div>
</div>
</div>
<div style="justify-content: flex-start; display: flex; flex-direction:column" class="mn1">
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">7acasd</p>
</div>
</div>
<div class="card card4" style="height:100%;margin-top: 16px;">
<div class="card-body">
<p class="card-text">7acsd</p>
</div>
</div>
</div>
</div>
<div class="card card16">
<div class="card-body">
<div class="d-flex" style="justify-content: space-between; display:flex; overflow-x:auto">
asda
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 customcol">
<div class="card card51">
<div class="card-body">
<p class="card-text">10asd</p>
</div>
</div>
<div class="card card51">
<div class="card-body">
<p class="card-text">11asdas</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 customcol">
<div class="card cardall">
<div class="card-body">
<p class="card-text">12asd</p>
</div>
</div>
</div>
</div>
</div>
. css
.card{
margin-top: 16px;
margin-left: 16px;
}
.card-body{
padding:4px;
}
.card1{
height: calc(10% - 16px)
}
.card51{
height: calc(50% - 16px)
}
.card16{
height: calc(10% - 16px)
}
.divh{
height: calc(40% - 16px);
margin-top: 16px;
}
.card2{
width: calc(50% - 16px);
margin-top:0px;
height:100%;
}
.card4{
width: calc(100% - 16px);
margin-top:0px;
height:100%;
}
.cardall{
height: calc(100% - 16px)
}
.customcol{
padding-left: 0;
padding-right: 0;
}
.card11{
width: calc(35% - 16px);
margin-top:0px;
height:100%;
}
.card12{
width: calc(35% - 16px);
margin-top:0px;
height:100%;
}
.card13{
width: calc(35% - 16px);
margin-top:0px;
height:100%;
}
.card21{
width: calc(100% - 16px);
margin-top:0px;
height:100%;
}
.mn{
width: calc(34% - 16px);
}
.mn1{
width: calc(24% - 36px );
}
.mn11{
width: calc(30% - 12px );
}
.mn12{
width: calc(39% - 36px );
}
Как вы можете Посмотрите на изображение, квадраты с красными границами не выровнены с квадратами с синей рамкой. Кто-нибудь может мне помочь?