Как верстать данный grid?

Question

Я верстаю макет из figma, в нем есть элемент, который нужно верстать с помощью свойства grid. Он несимметричен, и имеет довольно сложную структуру. Я, обучаюсь в в верстке не так давно. Я попытался сделать правильную структуру, но все тщетно, более того, в итоге мой макет превратился в кашу. В консоли разработчика chrome я обнаружил то, что свойства grid-template-areas, grid-template-columns и grid-template-rows не действуют. Подскажите пожалуйста, из-за чего свойства не работают. Я также оставлю ссылку на макет figma и скриншот grid в надежде на то, что мне объяснят, как сделать данный grid правильно. Спасибо.

[ Сетка из макета [!

body,
html,
.wrapper {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Inter';
}

.header {
  width: 100%;
  height: 96px;
  @include flex;
  padding: 0px 8%;
  box-shadow: 0px 4px 8px 0px #26323814;
  box-shadow: 0px 2px 4px 0px #26323829;
}

.main {
  width: 100%;
  height: 2738px;
}

.logo {
  width: 180px;
  height: 64px;
  @include flex;
}

.logo__text {
  color: $sec-color;
  font-size: 48px;
}

.nav {
  @include flex;
  display: inline-flex;
  width: 630px;
  height: 64px;
}

.nav__links {
  color: $fir-color;
  font-size: 18px;
  &:hover {
    transition: 0.4s;
    color: $sec-color;
  }
}

%button {
  @include button-reset;
  @include flex;
  justify-content: center;
  width: 170px;
  height: 64px;
  border-radius: 999px;
  background: $fir-color;
  span {
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    text-shadow: 0px 4px 8px 0px #26323814;
    text-shadow: 0px 2px 4px 0px #26323829;
  }
}

.button_sign-in {
  @extend %button;
  width: 170px;
  height: 64px;
}

.first-screen {
  @include flex;
  flex-direction: column;
  width: 100%;
  height: 1190px;
  padding: 0px 8%;
}

.first-screen__background-img {
  position: absolute;
  right: 0;
  top: 96;
  z-index: 5;
}

.first-screen__title {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 200px;
  top: 80px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}

.main__title {
  font-weight: 800;
  font-size: 96px;
  color: $sec-color;
  text-shadow: 0px 4px 0px #FFFFFF;
  letter-spacing: -3px;
}

.main__title_red {
  display: inline-block;
  text-align: center;
  background-image: url("../images/dest/holyLine.svg");
  height: 130px;
  width: 191px;
  background-repeat: no-repeat;
  background-position: bottom;
  color: #D63031;
}

.main__sub-title {
  font-size: 64px;
  font-weight: 900;
  color: $sec-color;
}

.first-screen__grid {
  width: 100%;
  height: 766px;
  display: grid;
  grid-gap: 30px;
  z-index: 15;
  grid-template-areas: "text man  man text text" "sphere man  man liter nike" "sphere book wooman wooman window" "button book wooman wooman";
  grid-column: 270px 270px 200px 170px 170px;
  grid-row: 128px 200px 170px 112px;
}

.grid-text {
  grid-area: text;
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
}

.grid-block_sphere {
  grid-area: sphere;
  background-image: url('../images/dest/sphere.png');
  width: 270px;
  height: 464px;
  flex-direction: column;
  padding: 60px 0px;
  @include flex;
}

.grid-block_sphere__grid-title {
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  line-height: 32px;
  .grid-block_sphere__grid-subtitle {
    font-size: 14px;
    font-weight: 400;
  }
}

.button_learn-more {
  grid-area: button;
  @extend %button;
  width: 270px;
  height: 82px;
  span {
    font-size: 32px;
  }
}

.grid-block_man {
  grid-area: man;
  @include flex;
  justify-content: center;
  align-items: flex-end;
  width: 470px;
  height: 380px;
  border-radius: 20px;
  padding: 20px 0px;
  background: url('../images/dest/man.png');
}

.grid-block_man__white-text {
  font-weight: 700;
  font-size: 48px;
  color: #fff;
  text-shadow: 0px 4px 0px #000000;
}

.grid-block_book {
  grid-area: book;
  width: 270px;
  height: 284px;
  border-radius: 20px;
  background: url('../images/dest/book.png');
}

.grid-block_wooman {
  grid-area: wooman;
  @include flex;
  justify-content: center;
  align-items: flex-start;
  width: 370px;
  height: 356px;
  border-radius: 20px;
  padding: 20px 0px;
  background: url('../images/dest/women.png');
}

%grid-block_min {
  width: 170px;
  height: 222px;
  border-radius: 20px;
}

.grid-block_liter {
  grid-area: liter;
  @extend %grid-block_min;
  background-image: url('../images/dest/liter.png');
}

.grid-block_nike {
  grid-area: nike;
  @extend %grid-block_min;
  background-image: url('../images/dest/nike.png');
}

.grid-block_window {
  grid-area: window;
  @extend %grid-block_min;
  background-image: url('../images/dest/window.png');
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="css/app.min.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid</title>
</head>

<body>
  <wrapper class="wrapper">
    <header class="header">
      <div class="logo">
        <img src="images/dest/logo.svg" alt="" class="logo__image">
        <h3 class="logo__text">Grid</h3>
      </div>
      <nav class="nav">
        <a class="nav__links" href="#">How it works</a>
        <img src="images/dest/circle.svg" alt="" class="nav-circle">
        <a class="nav__links" href="#">Who we are</a>
        <img src="images/dest/circle.svg" alt="" class="nav-circle">
        <a class="nav__links" href="#">What we do</a>
        <img src="images/dest/circle.svg" alt="" class="nav-circle">
        <a class="nav__links" href="#">Contact us</a>
      </nav>
      <button class="button_sign-in"><span>Sign In</span></button>
    </header>
    <main class="main">
      <div class="first-screen">
        <img src="images/dest/rectangle.svg" alt="" class="first-screen__background-img">
        <div class="first-screen__title">
          <span class="main__title">Combine <span class="main__title_red">fine</span> images</span>
          <span class="main__sub-title">To represent a product</span>
        </div>
        <div class="first-screen__grid">
          <p class="grid-text">Use mixed grid with imagery,<br/> replace with your own photos<br/> and descriptions</p>
          <div class="grid-block_sphere">
            <span class="grid-block_sphere__grid-title">
                            We aimed to deliver HQ templates for Figma<br/>
                            <span class="grid-block_sphere__grid-subtitle">Used by 123 people</span>
            </span>
          </div>
          <button class="button_learn-more"><span>Learn more</span></button>
          <div class="grid-block_man">
            <span class="grid-block_man__white-text">Consider it done!</span>
          </div>
          <div class="grid-block_book"></div>
          <div class="grid-block_wooman">
            <span class="grid-block_man__white-text">See my goal?</span>
          </div>
          <p class="grid-text">
            <p class="grid-text">This is multipurpose grid, it fits for<br/> portfolio, services or agency web site</p>
          </p>
          <div class="grid-block_liter"></div>
          <div class="grid-block_nike"></div>
          <div class="grid-block_window"></div>
        </div>
      </div>
      </div>
    </main>
    <footer class="footer"></footer>
  </wrapper>
</body>

</html>

]3]3

Ссылка на макет

БЛОГ НА HUSL

Как верстать данный grid?

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