Arranging divs automatically while making one div bigger

Question

I have been trying to create a gallery app where user mouseover on div and it gets bigger but rest remain the same height. You can see that happening in the example of this codepen snippet.

Problem: The problem is when I mouseover to some divs, it doesn't arranged properly. Can anyone help me with make it like so that no divs go out of the parent div and fill out the parent div.

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

body {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.main {
  width: 400px;
  height: 500px;
  background: red;
  font-size: 0;
}

.preview {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid grey;
  transition: width 1s;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  float: left;
}

.active {
  width: 200px;
  height: 200px;
}

.preview>span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div class="preview active"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
</div>

Answer 1

You can use CSS Grid Layout Module:

A Complete Guide to Grid

Example:

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

.main {
    width: 400px;
    height: 500px;
    background-color: red;
    /* CSS Grid */
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0
}
.preview {
    border: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
    font-size: 32px;
    transition: all 1s
}
.active{
    grid-column: span 2;
    grid-row: span 2;
    background-color: rgba(255, 255, 255, .9)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
    <div class="preview active"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
</div>