По какому принципу можно сверстать блок который идет ниже кнопок?

Question

вообще не понимаю как такое можно сверстать

Answer 1

Да тут уйма разных способов возможна.

Например, сделать сетку фоновой картинкой. Или градиентом. Или таблицей с границами. А поверх нее положить блок, где позиционировать абсолютно картинки.

или даже не поверх таблицы, а в нее:

.gridParent {
  margin-top: 30px
}

.grid {
  border-collapse: collapse;
  width: 100%;
}

.grid td {
  border-top: 1px solid;
  padding: 10px 0;
  position: relative;
  height: 30px;
}

.other {
  text-align: center;
  width: 15%;
}

.grid td.first {
  border-color: transparent;
}

tr:not(:last-child) .other {
  border-right: 1px solid;
}

.other div {
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  box-shadow: 0 0 0 3px white;
  position: absolute;
  top: -0.5em;
}

.image1 {
  background-color: gray;
  color: white;
}

.image2 {
  background-color: salmon;
  color: white;
  transform: rotate(45deg)
}

.image3 {
  background-color: #ccc;
  border-radius: 100%;
}

.marker {
  display: inline-block;
  box-shadow: 0 0 0 3px white;
  position: absolute;
  top: -0.5em;
  background-color: white;
}

.marker {
  border: 1px solid;
  border-radius: 100%;
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
}

.marker2 {
  border-radius: 0;
}

<div class="gridParent">
  <table class="grid">
    <tr>
      <td class="first">
        <div class="marker">1</div>
      </td>
      <td class="second">
        <div class="marker marker2">a</div>
      </td>
      <td class="other"></td>
      <td class="other">
        <div class="image1">*</div>
      </td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other"></td>
      <td class="other">
        <div class="image3">#</div>
      </td>
      <td class="other"></td>
    </tr>
    <tr>
      <td class="first">
        <div class="marker">2</div>
      </td>
      <td class="second">
        <div class="marker marker2">b</div>
      </td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other"></td>
      <td class="other"></td>
      <td class="other">
        <div class="image1">*</div>
      </td>
      <td class="other">
        <div class="image3">#</div>
      </td>
      <td class="other">
        <div class="image1">*</div>
      </td>
    </tr>
    <tr>
      <td class="first">
        <div class="marker">3</div>
      </td>
      <td class="second">
        <div class="marker marker2">c</div>
      </td>
      <td class="other">
        <div class="image1">*</div>
      </td>
      <td class="other">
        <div class="image3">#</div>
      </td>
      <td class="other"></td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other">
        <div class="image1">*</div>
      </td>
    </tr>
  </table>
</div>

БЛОГ НА HUSL

По какому принципу можно сверстать блок который идет ниже кнопок?

Ответы (1 шт):