Как сделать таблицу с border без тега table?

Question

[Di Da]

Хочу сделать такую адаптивную таблицу. Всё бы ничего, но как это реализовать с div'ами, чтобы у всех были грани?

Comments

[Beliyadm]

flex\grid\inline - да как угодно

Answer 1

[Алексей Джо]

https://jsfiddle.net/b1vc72tk/

<div class="catalog">
  <div class="catalog__container">
    <div class="catalog-item">
      <div class="catalog-item__inner">
      
      </div>
    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
  </div>
</div>

.catalog {
  
  &__container{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #c5c5c5;
    border-right: 1px solid #c5c5c5;
    
    @media (min-width: 505px) {
      width: 505px;
    }
    
    @media (max-width: 504px) {
      width: 205px;
    }
    margin: 0 auto;
  }
  
  &-item{
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-left: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    
    &::before{
      content: '';
      width: 100%;
      height: 1px;
      background-color: #c5c5c5;
    }
  }
}