Flex grid

by Artem Borovikov

HTML

<div class="table">
  <div class="table-row">
    <div class="table-th">Фото</div>
    <div class="table-th">Название</div>
    <div class="table-th">Кол-во</div>
    <div class="table-th">Цена</div>
    <div class="table-th"></div>
  </div>
  
  <div class="table-row">
    <div class="table-td">Фотография</div>
    <div class="table-td">Далеко-далеко за словесными.</div>
    <div class="table-td">1</div>
    <div class="table-td">399 руб</div>
    <div class="table-td">Купить</div>
  </div>
  
  <div class="table-row">
    <div class="table-td">Фотография</div>
    <div class="table-td">Далеко-далеко за словесными.</div>
    <div class="table-td">1</div>
    <div class="table-td">399 руб</div>
    <div class="table-td">Купить</div>
  </div>
</div>

<table>
  <tr>
    <th>Фото</th>
    <th>Название</th>
    <th>Кол-во</th>
    <th>Цена</th>
  </tr>
  
  <tr>
    <td>Фотография</td>
    <td>Далеко-далеко за словесными.</td>
    <td>1</td>
    <td>399 руб</td>
  </tr>
</table>

CSS

.table {
  display: table;
  width: 100%;
  margin-top: -10px;
  margin-bottom: -10px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table-row {
  display: table-row;
  padding: 10px;
  
}

.table-th,
.table-td {
  display: table-cell;
  padding: 10px 10px;
}

.table-th {
  background: lightblue;
}

.table-td {
  background: #eee;
}

table {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0 1em;
}

tr {
  padding: 10px;
  background: red;
}

th {
  text-align: left;
}