dispaly: inline-block

Tiles looking content

by Alexander Zonov

HTML

<div class="tiles-holder">
  <div class="tile">
    <div class="tile__header">
      <h1>Header</h1>
    </div>
    <div class="tile__content">
      <p>A little bit of text</p>
    </div>
  </div><div class="tile">
    <div class="tile__header">
      <h1>Header</h1>
    </div>
    <div class="tile__content">
      <p>A little bit of text</p>
    </div>
  </div><div class="tile">
    <div class="tile__header">
      <h1>Header</h1>
    </div>
    <div class="tile__content">
      <p>A little bit of text</p>
    </div>
  </div><div class="tile">
    <div class="tile__header">
      <h1>Header</h1>
    </div>
    <div class="tile__content">
      <p>A little bit of text</p>
    </div>
  </div>
</div>

CSS

.tiles-holder {
  text-align: center;
  white-space: normal;
}

.tile {
  width: 30%;
  box-sizing: border-box;
  margin: 15px 15px 15px 15px;
  padding: 10px 10px 10px 10px;
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  white-spaces: normal;
}