<div class="p">FlexBox</div>
<div class="flex">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="p">Css Grid</div>
<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="p">Float</div>
<div class="float">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="p">inline-block</div>
<div class="inline-block">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.box {
  width: 200px;
  height: 200px;
  margin: 10px 5px;
  background: #000;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
  grid-template-columns:repeat(3,200px);
  grid-column-gap: 10px;
}
.float div {
  float: left;
}
.inline-block div {
  display: inline-block;
}
.p {
  margin: 20px 0px;
  width: 100%;
  display: inline-block;  
}