Positioning HTML Boxes In a Downwards Facing Triangle

Question

I've received an... unusual request from a client, and that is to position the courses that they offer in a downwards facing triangle. Diagram below:

 X X X X
  X X X
   X X 
    X

Where X is one of the boxes. I've done this with some row classes and offset (below) but I'm now thinking that there might be an easier way to do this, as it's not exactly an accessible layout (All the pixel values and offsets are hard coded). I'm looking for some insight as to how you would position the boxes responsively or an easier way to achieve what I've done below.

.item {
  text-align: center;
  width: 260px;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

.item button {
  float: right;
}

.row {
  width: 100%;
  clear: both;
}

.offset {
  position: relative;
}

.offset-1 {
  left: 130px;
}

.offset-2 {
  left: 260px;
}

.offset-3 {
  left: 390px;
}

<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row offset offset-1">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row offset offset-2">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row offset offset-3">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>

Kirovograd

Answer 1

The offset classes are not necessary.

Set text-align: center on the rows and display: inline-block on the items and you're good to go. (for more info on centering - see this article)

Updated Codepen

---

If you need this to be responsive, you could use flexbox

.row {
  width: 100%;
  height: 23vw;
  text-align: center;
  display: flex;
  justify-content: center;
}
.item {
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20vw;
  height: 16vw;
}
img {
  width 100%;
  height: 100%;
}
.item button {
  display: block;
  margin-top: 10px;
}

<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>

Updated Codepen (flexbox)

Flophouse