Выровняйте элементы Div разных размеров в указанном порядке

Question

Я хочу сохранить то же самое height из big div с другим (скажем, 20) делением на том же container между 1024px до 1920px max width;

большое дело, когда я хочу, чтобы все предметы плавали и имели красивый и чистый layout grid.

Только у big div должна быть ширина 60% от container, тогда всемалые делятся на 20% и плавали рядом с большим.

Структура такова:

<div class="container">

<div class="big-div" style="width: 60%;"></div>

<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>

</div>

Answer 1

Это то, что вам нужно.

.container
{
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.big-div
{
    background:red;
    flex-basis: 50%;
    top:0;
    left:0;
}

.small-div
{
    background:blue;
    width:100px;
    color:white;
    flex-basis:25%;
}

.big-div, .small-div
{
    border:2px solid white;
    padding: 10px;
    font-family: sans-serif;
    box-sizing:border-box;
    align-self: flex-start;
    overflow:scroll;
}

<div class="container">
    <div class="big-div">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>

Answer 2

function sidebarHandler() {
          jQuery(".big-div").css({'height':(jQuery(".small-div").height()+'px')});
          jQuery(".big-div").height(jQuery(".small-div").height());
          var highestCol = Math.max(jQuery('.big-div').height(),jQuery('.container').height());
          jQuery('.big-div').height(highestCol);
          console.log(highestCol);
          console.log($('.big-div').height());
          console.log($(".big-div").css({'height':(jQuery(".small-div").height()+'px')}));
        }
        jQuery(document).ready(function() { 
            sidebarHandler();
            $(window).resize(function() {
                sidebarHandler();
            });
        });

Answer 3

Вот, пожалуйста! CSS сетка. HTML:

<div class="container">
  <div class="big-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div last-1"></div>
  <div class="small-div last-2"></div>
  <div class="small-div last-3"></div>
  <div class="small-div last-4"></div>
</div>

CSS:

.container {
  display:grid;
  grid-gap:10px;
  grid-template-rows:repeat(4, 1fr);
  grid-template-columns:repeat(6, 1fr)
}

.big-div {
  grid-column:span 4;
  grid-row:span 2;
}

.last-1 {
  grid-column:1/2;
  grid-row:4/5
}
.last-2 {
  grid-column:2/3;
  grid-row:4/5
}
.last-3 {
  grid-column:3/4;
  grid-row:4/5
}
.last-4 {
  grid-column:4/5;
  grid-row:4/5
}
.container > div {
  border:1px solid;
  background-color:green;
}

Codepen: https://codepen.io/gkilmain/pen/eKQjee