• Как дать ссылку grid элементу?

    @alpprom63 Автор вопроса
    Ankhena,
    Как все! А где сам путь ссылки?
  • Как дать ссылку grid элементу?

    @alpprom63 Автор вопроса
    Ankhena, Вы как-то заумно отвечаете.

    Короче на другом сайте нашел решение.
    Может кому пригодится
    <div class="grid-item1">
        <a class="cover-link" href=habr.com></a>
        <p>Хабр</p>
      </div>


    .grid-item1  {
    position: relative;
    }
    
    a.cover-link {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  • Как дать ссылку grid элементу?

    @alpprom63 Автор вопроса
    Ankhena, вот ссылка
    https://promalp-v-samare.ru/spil-dereva-v-samare.html


    нужно ее дать на весь грид элемент
    <div class="grid-item1">
        <p>Спил деревьев</p>
      </div>
  • Как отпозиционировать элементы как на фото?

    @alpprom63
    <div class="grid">
    
    <div class="grid-item1"></a>
        <p>Слева</p>
      </div>
      <div class="grid-item2">
        <p>Справа</p> 
      </div>
      <div class="grid-item3">
        <p>Снизу центр</p> 
      </div>
       </div>


    .grid {
      width: 900px;
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 230px;
      gap: 10px;
    }
    
    .grid > div {
    padding: 0 5px 15px 12px;
    display: flex;
    align-items: flex-end;
    border-radius: 10px;
    }
    
    
    
    .grid-item1  {
    grid-row: 1;
    grid-column: 1;
    background: url(https://i.pinimg.com/236x/f3/fe/1d/f3fe1dd69bf54aa4822e9aab096afc62.jpg) no-repeat center/cover;
    position: relative;
    z-index: 2;
    }
    
    .grid-item2 {
      grid-row: 1;
      grid-column: 2;
      background: url(https://i.pinimg.com/236x/f3/fe/1d/f3fe1dd69bf54aa4822e9aab096afc62.jpg) no-repeat center bottom/cover;
      position: relative;
      text-align: left;
    }
    
    .grid-item3 {
      grid-row: 2;
      grid-column: span 2;
      position: relative;
      background: url(https://i.pinimg.com/236x/f3/fe/1d/f3fe1dd69bf54aa4822e9aab096afc62.jpg) no-repeat center/cover;
    }