I have this example: https://jsfiddle.net/n3qs0wke/

.wrapper {
    max-width: 600px;
    border: 1px solid #333;
}
.big-div {
    min-width: 212px;
    min-height: 212px;
    max-width: 212px;
    max-height: 212px;
    display: inline-flex;
    background-color: #778;
    margin: 4px;
}
.small-div {
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    display: inline-flex;
    background-color: #787;
    margin: 4px;
}

<div class="wrapper">
    <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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I would like to make it so that .small-div are filling 2 rows next to .big-div and only when 2 rows are filled they start appearing under .big-div. Kind of like having rowspan="2" on .big-div

This must be already answered in SO, but I'm not so good with CSS terminology so I didn't know how to search.

Thank you in advance

CodePudding user response：

I set .wrapper as display: grid; with 5 columns, and then added the CSS below for the big-div:

  /* ADDED */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;

DEMO

.wrapper {
  max-width: 600px;
  border: 1px solid #333;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}
.big-div {
  min-width: 212px;
  min-height: 212px;
  max-width: 212px;
  max-height: 212px;
  /*display: inline-flex;*/
  background-color: #778;
  margin: 4px;
  /* ADDED */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
    
}
.small-div {
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  /*display: inline-flex;*/
  background-color: #787;
  margin: 4px;
}

<div class="wrapper">
    <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>
    <!-- ADDED MORE 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

EDIT: I interpreted "fill two rows" as "be two rows tall". I now realise you possibly meant "be distributed over two rows".

If that's what you wanted, then use this instead of the below: https://jsfiddle.net/Lkjdmvfg/1/

.wrapper {
    max-width: 600px;
    border: 1px solid #333;
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-auto-rows: 100px;
    gap: 8px;
}
.big-div {
    background-color: #778;
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.small-div {
    background-color: #787;
}

<div class="wrapper">
    <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"></div>
    <div class="small-div"></div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The difference is that instead of defining the whole first row as being twice as tall, each row is the same height (100px) and only the big div is told to span two of them.

---

This does the trick. Note that I replaced your margins with gap on the wrapper, and removed the inline-flex and hardcoded sizes, moving them to the grid template. You can make them more flexible by replacing 200px with 2fr and 100px with 1fr, which will make the sizes proportional instead of fixed.

https://jsfiddle.net/Lkjdmvfg/

.wrapper {
    max-width: 600px;
    border: 1px solid #333;
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: 200px 100px;
    gap: 8px;
}
.big-div {
    background-color: #778;
    grid-column-start: span 2;
}
.small-div {
    background-color: #787;
}

<div class="wrapper">
    <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"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>