Блог

Я настраиваю меню с использованием сетки с намерением сделать его отзывчивым и центрированным на странице. В сетке есть два элемента: шестнадцатеричное меню (созданное с помощью flex) и изображение. Они накладываются друг на друга так, что изображение (справа) выравнивается по центру шестнадцатеричного меню (слева). Я изо всех сил пытаюсь добиться того, чтобы высота обоих элементов всегда была одинаковой, сохраняя при этом центрирование всего объекта и оставаясь отзывчивым.
вот макет с включенной сеткой в Chrome inspector

 :root{
  /* Colors */
  --color-hex-default: #ffffff;
  --color-hex-hover: #ffffff;
  }

.hexcontainer {

  display: grid;
  grid-auto-columns: 1fr 1fr 1fr 1fr;
}


.hexmenu {
  grid-row: 1;
  grid-column: 1/3;
  z-index: 3;
  justify-self: center;
}
.notcat {
  background-image: url(/notcat1400.jpg);
  grid-row: 1;
  grid-column: 2 / 4;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 2%, black 25%);
  background-size: contain;
  z-index: 1;
    height: 100%;
}

.hexGrid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -1.75% 0;
  overflow: hidden;
  font-family: "Nunito Sans";
  font-weight: bold;
  list-style-type: none;
  padding-left: 0px;
}
ul.hexGrid {
  width:20vw;
  position:relative;
  padding-top: 100%

}

li.hexGrid {
  --h: calc(100% / 3);
  --w: calc(1.15470053838 * var(--h));
  --a: calc(0.28867513459 * var(--h));
  --d: calc(0.57735026919 * var(--h));
  height:var(--h);
  width:var(--w);
  position:absolute;
font-size: 1.25vw;
}


.hexLink {

    background-color: var(--color-hex-default);
    color: white; /*text in hex before color*/
    overflow: hidden;
        transition: background-color 0.4s ease;
        display:block;
        width:95%;
        height:95%;
        --aw:24.99999999999%;
        clip-path:polygon(
          var(--aw) 0,
          0 50%,
          var(--aw) 100%,
          calc(100% - var(--aw)) 100%,
          100% 50%,
          calc(100% - var(--aw)) 0
        );
}

.hexLink.color-contact {
  color:black;
  }

li:nth-of-type(1) {
  left:calc(50% - var(--a) - var(--d) * 0.5);
  top:0;
}
li:nth-of-type(2) {
  left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top:calc(var(--h) * 0.5);
}
li:nth-of-type(3) {
  left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top:calc(var(--h) * 1.5);
}
li:nth-of-type(4) {
  left:calc(50% - var(--a) - var(--d) * 0.5);
  top:calc(var(--h) * 2);
}
li:nth-of-type(5) {
  left:calc(50%   var(--d) * 0.5);
  top:calc(var(--h) * 0.5);
}
li:nth-of-type(6) {
  left:calc(50%   var(--d) * 0.5);
  top:calc(var(--h) * 1.5);
}
li:nth-of-type(7) {
  position:absolute;
  left:calc(50% - var(--a) - var(--d) * 0.5);
  top:calc(var(--h) * 1.0);

}

hext {
margin: 0;
position: absolute;
text-align: center;
top: 47.5%;
left: 47.5%;
/*font-size: 2vw;*/
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
    font-weight: bold;
    word-break: keep-all;
}
hext:hover{
transition: 0.1s;
}

.hexLink:hover {
  background-color: var(--color-hex-hover);
  transition: 0.2s ease;
}
.hexLink.color-contact:hover{
  background-color: black;
}
.hexLink:hover::after,
.hexLink:hover::before {
  border-top-color: var(--color-hex-hover);
  border-bottom-color: var(--color-hex-hover);
}

 

     <div class="hexcontainer">
<div class="hexmenu">
<ul class="hexGrid">
<li class="hexGrid"><a class="hexLink color-design" href="#"><hext>design</hext></a></li>
<li class="hexGrid"><a class="hexLink color-blog" href="#"><hext>blog</hext></a></li>
<li class="hexGrid"><a class="hexLink color-workshop" href="#"><hext>workshop</hext></a></li>
<li class="hexGrid"><a class="hexLink color-teach" href="#"><hext>coach</hext></a></li>
<li class="hexGrid"><a class="hexLink color-coach" href="#"><hext>teach</hext></a></li>
<li class="hexGrid"><a class="hexLink color-about" href="#"><hext>about</hext></a></li>
<li class="hexGrid"><a class="hexLink color-contact" href="#"><hext>contact</hext></a></li>
</ul></div>
<div class="notcat">
    </div>
</div>