A Pen by Ruben Vincenten.

index.html

<div class="quarter">
  <div class="square">
    <div class="content">
      <h1>Lorem ipsum</h1>
    </div>
  </div>
</div>
<div class="quarter">
  <div class="square">
    <div class="content">
      <h1>Lorem ipsum</h1>
    </div>
  </div>
</div>
<div class="quarter">
  <div class="square">
    <div class="content">
      <h1>Lorem ipsum</h1>
    </div>
  </div>
</div>
<div class="quarter">
  <div class="square">
    <div class="content">
      <h1>Lorem ipsum</h1>
    </div>
  </div>
</div>

jGarc.markdown

jGarc

A Pen by Ruben Vincenten on CodePen.

License.

style.less

* {
  box-sizing:border-box;
}

.quarter {
  width:24%;
  margin-right:1%;
  float:left;
  background:red;
  color:white;
  .square {
    padding-top:100%;
    position:relative;
    overflow:hidden;
    .content {
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      overflow:auto;
    }
  }
}