Как сделать сетку grid

Рейтинг: 0Ответов: 0Опубликовано: 23.04.2023

Как сделать такую сетку грид как на фото(мобильная версия)? Пк версию я смог сделать сам введите сюда описание изображения введите сюда описание изображения

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

<head>
  <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>Document</title>
</head>

<body>

  <style>
    .grid>* {
      background-color: blue;
      /* min-height: 80px; */
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min-content, 400px));
      /* grid-template-columns: repeat(auto-fit, minmax(245px, auto)); */
      grid-template-rows: repeat(3, [row] 1fr);
      /* grid-gap: 15px; */
      grid-auto-flow: column;
    }
    
    .mainGrid {
      max-width: 1250px;
      height: 800px;
    }
    
    .item1 * {
      /* grid-column: col 1 / col 4; */
      /* grid-row: row 1 / row 3; */
      /* grid-area: one; */
      max-width: 245px;
      height: 245px;
    }
    
    .item1 {
      text-align: center;
      grid-column: 1 / 2;
      grid-row: row 1 / row 3;
    }
    
    .item1>img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .item2 {
      grid-column: 2 / 3;
      align-self: center;
      gap: 20px;
      display: flex;
      flex-wrap: wrap;
    }
    
    .item2>div {
      width: 100%;
    }
    
    .item3 {
      grid-column: 4 / -1;
      grid-row: row 1 / row 4;
    }
    
    .item3 * {
      display: flex;
      flex-wrap: wrap;
    }
    
    .item3>div:first-child>div>img {
      width: 50px;
      height: 50px;
    }
    
    .item3>div {
      margin-bottom: 20px;
    }
    
    .item3>div>div:first-child {
      width: 100%;
    }
    
    .item3>div:nth-child(2)>div>div>img {
      width: 54px;
      height: 54px;
    }
    
    .item3>div:nth-child(3)>div>img {
      width: 54px;
      height: 54px;
    }
    
    .item3>div:nth-child(4)>div>img {
      width: 45px;
      height: 45px;
    }
    
    .item4 {
      grid-column: 2 / 3;
    }
    
    .item4>div>div>img {
      width: 30px;
      height: 30px;
    }
    
    .item4>div {
      display: flex;
      flex-wrap: wrap;
    }
    
    .item4>div:last-child {
      width: 100%;
    }
    
    .item5>div>div>img {
      width: 50px;
      height: 50px;
    }
    
    .item5>div {
      display: flex;
      flex-wrap: wrap;
    }
    
    .item5>div>div {
      display: flex;
      align-items: center;
    }
    
    .item6>div {
      max-width: 228px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      justify-content: center;
    }
    
    .item6>div>img {
      width: 76px;
      height: 76px;
    }
    
    @media (max-width: 820px) {
      .item1 {
        text-align: center;
        grid-column: 1 / 2;
        grid-row: row 1 / row 2;
      }
      .item2 {
        grid-column: 2 / 3;
        align-self: center;
        gap: 20px;
        display: flex;
        flex-wrap: wrap;
      }
      .item3 {
        grid-column: 2 / -1;
        grid-row: row 2 / row 4;
      }
      .item4 {
        grid-column: 1 / 2;
      }
      .item6 {
        grid-column: 1 / -1;
        grid-row: row -1 / row 3;
      }
    }
  </style>

  <div class="mainGrid">
    <div class="grid">
      <div class="item1">
        <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
      </div>
      <div class="item2">
        <div>Wrugb Онлайн 13 часов назад</div>
        <div>26 лет Москва 00:00-03:00</div>
      </div>
      <div class="item3">
        <div>
          <div>Общие друзья</div>
          <div>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          </div>
        </div>
        <div>
          <div>Общие игры</div>
          <div>
            <div>
              <span>Dota 2</span>
              <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            </div>
            <div>
              <span>Dota 2</span>
              <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            </div>
            <div>
              <span>Dota 2</span>
              <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            </div>
          </div>
        </div>
        <div>
          <div>Игры, в которые хочу поиграть</div>
          <div>
            <span>Dota 2</span>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          </div>
          <div>
            <span>Dota 2</span>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          </div>
        </div>
        <div>
          <div>Общие платформы</div>
          <div>
            <span>Dota 2</span>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          </div>
          <div>
            <span>Dota 2</span>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="item4">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div>
          <div>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            <span>Wrugb</span>
          </div>
          <div>
            <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
            <span>Wrugb</span>
          </div>
        </div>
        <div> <button>Добавить</button>
        </div>
      </div>
      <div class="item6">
        <div>
          <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
          <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
        </div>
      </div>

      <!-- <div class="item7">
                <div>
                    <div>
                        <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
                        <span>Wrugb</span>
                    </div>
                    <div>
                        <img src="https://sportishka.com/uploads/posts/2022-11/1667561336_85-sportishka-com-p-samarskie-dostoprimechatelnosti-pinterest-86.jpg" alt="">
                        <span>Wrugb</span>
                    </div>
                </div>

                <div> <button>Добавить</button>
                </div>
            </div> -->
    </div>
  </div>
</body>
</html>

Как сделать 1 ячейку (аву профиля) 75px и прижать другие ячейки?

css grid
Источник: Stack Overflow на русском

Ответы

Ответов пока нет.