Grid/Flexbox layout with fitting dynamic width and height elements

Question

I try to create a grid with one central element like at image using flexbox. f square has class active where I double width and height. is this possible to make other squares fit to the rest? Sholud I use flexbox or maybe grid?

Next I want to add listener with click event. Clicking on square will move it to central position and add active class and add transition on this move (it can't be done with gird??)

.

Here is my pen: link

Answer 1

To get this layout you can use CSS Grid layout. You can set repeat(4, 100px) on both grid-template columns and rows. For active box you can use 2 / 4 on grid-row and grid-column so that box with class active will always be in the middle of layout. For spacing you can use grid-gap

$(".wrapper .box").click(function() {
  $(this).addClass('active').siblings().removeClass('active')
})

body {
  margin: 40px;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 10px;
}
.box {
  background: #444444;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  font-size: 30px;
  cursor: pointer;
}
.box:not(.active):hover {
  transition: background 0.3s ease-in;
  background: orange;
}
.active {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f active">f</div>
  <div class="box g">g</div>
  <div class="box h">h</div>
  <div class="box i">i</div>
  <div class="box i">j</div>
  <div class="box i">k</div>
  <div class="box i">l</div>
  <div class="box i">m</div>
</div>