在使一个div更大的同时自动排列div

Question

我一直在尝试创建一个图库应用，其中用户鼠标悬停在div上并且它变大但休息保持相同的高度。您可以在此codepen代码段的示例中看到这种情况。

问题：问题是当我将鼠标移到某些div时，它没有正确排列。任何人都可以帮助我使它像所以没有div离开父div并填写父div。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用CSS Grid布局模块：

  

A Complete Guide to Grid

示例：

$( '.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>