@chudomozg

Как сделать на CSS Grid (или на чем то другом) поворачивающую область?

Есть задача:
.content - количество контента неизвестно и на каждой странице разное.
.sidebar - в сайдбаре блоки виджетов (количество неизвестно, может быть разным), сайдбар справа от контента, но когда сайдбар больше по высоте чем контент, виджеты должны уходить под .content

Насколько позволяет моя компетенция, на flex-box это нереализуемо, начал пытаться сделать на css-grid.

grid-template-areas: 
"content sidebar"
"sidebar sidebar";


не работает, видимо так нельзя.

вот примерная структура

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        display: grid;
        grid-template: 1fr 1fr / 3fr 1fr;
        grid-gap: 0px;
      }

      .box {
        background-color: rgb(253, 193, 193);
      }
      .sidebar {
        background-color: rgb(255, 219, 172);
      }
      .sidebar .box {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex! Lorem
        ipsum dolor, sit amet consectetur adipisicing elit. Et sapiente ipsa,
        minus quisquam ea eligendi dolore modi libero. Fugiat rerum eius ea sint
        omnis provident modi sed libero voluptate esse quis, dolorem delectus
        obcaecati minima adipisci dolor non quibusdam est assumenda quod quasi
        recusandae at repellat. Exercitationem ipsum dolor, distinctio, odio
        placeat atque a quis eaque error labore architecto quisquam impedit
        rerum at. Ad, accusantium voluptatum fugit laboriosam quae blanditiis
        iste beatae molestiae maxime commodi voluptates cumque eius odit,
        officia repudiandae eaque minus praesentium mollitia, quaerat alias et?
        Similique autem inventore animi aliquam, dolor vero veniam quisquam
        ipsam vel? Magni? Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Veniam sequi similique fuga autem eum quis facere molestiae
        provident debitis, et, mollitia maiores expedita veritatis excepturi
        saepe eos. Ut unde qui alias fugit ipsa accusamus voluptas architecto.
        Deleniti tenetur temporibus numquam. Non ex, aspernatur voluptatem eaque
        cupiditate atque, a similique fugiat perferendis numquam maiores
        perspiciatis voluptatum! Laborum voluptas corrupti incidunt velit
        obcaecati facere aspernatur, soluta earum autem perferendis voluptate,
        numquam iste! Dolores, vitae harum perferendis dolore modi facilis,
        suscipit ex dolorum adipisci eum amet ipsum maiores doloribus ad
        voluptatibus a ab accusamus sed vel, esse error. Labore impedit atque
        sint quia quis odio mollitia error quaerat repellat ullam commodi
        corporis animi illum voluptates doloribus, recusandae enim! Aliquid eum
        consectetur aspernatur, recusandae ullam distinctio facere ad soluta
        excepturi voluptati bus non. Officia deserunt odio ipsum praesentium
        delectus tenetur distinctio vel eaque accusamus repudiandae! Modi
        aperiam iste nisi excepturi quos atque ullam iusto molestiae corrupti
        libero, sequi consectetur officia. Natus enim saepe numquam libero quos
        unde vitae, tenetur voluptat e fugit ex facere exercitationem,
        voluptatum maxime iste reprehenderit dignissimos magnam molestias error
        at quasi. Nihil consectetur quibusdam labore temporibus quia sunt
        exercitationem perspiciatis laudantium repudiandae accusantium nisi
        similique voluptatem amet voluptatibus, tenetur dolorem earum impedit.
        Error a, debitis sapiente at illum ad repellendus repudiandae eligendi.
        Eum quasi saepe mollitia, sint, odio minus quae sit laborum quaerat
        tenetur nihil nulla maiores veniam por ro. Dolorem earum cumque impedit
        laboriosam placeat aperiam voluptates necessitatibus molestiae ratione
        est non consequatur ipsum incidunt eum, quo officia a dignissimos at aut
        cum! A iure nesciunt, quam magnam vel necessitatibus fugiat eligendi
        neque accusantium quos doloremque explicabo repudiandae officia odit
        laboriosam aspernatur odio deserunt obcaecati ipsum labore unde
        adipisci. Commodi distinctio ea maxime deserunt velit voluptate officia
        ducimus in a! Quod in unde possimus porro mollitia officiis inventore
        sequi beatae, ea at tempora nulla nisi libero itaque reprehenderit,
        voluptate optio minus facere exercitationem voluptatum eius quos!
        Provident ratione, molestias maxime eveniet reiciendis suscipit quo quia
        labore nisi, saepe quis quam et nam adipisci numquam illum corrupti
        facere ipsam nostrum eius, accusamus qui omnis? Autem harum, assumenda
        fugit atque fuga cum recusandae maiores repellat maxime nesciunt
        provident aut possimus odit doloribus temporibus in unde error vitae
        culpa iusto
      </div>
      <div class="sidebar">
        <div class="box">
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Буквенных она над пунктуация однажды семантика переулка
          необходимыми наш жизни!
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id ut
          facere repudiandae in laboriosam consequatur atque fugit magnam
          deserunt expedita eaque dolorem, itaque, quis ipsum, eos eum
          perferendis corporis! Dignissimos vero consequatur, dolor impedit
          obcaecati ex nostrum! Totam, ut?
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi
          consectetur similique dicta excepturi pariatur fugit ullam doloremque
          quidem sapiente accusantium!
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, id!
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis
          suscipit reprehenderit cumque ratione, saepe deserunt in, repellendus
          sequi, vero id fugit odio qui totam doloribus cupiditate asperiores.
          Fuga, sed odio.
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis
          suscipit reprehenderit cumque ratione, saepe deserunt in, repellendus
          sequi, vero id fugit odio qui totam doloribus cupiditate asperiores.
          Fuga, sed odio.
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis
          suscipit reprehenderit cumque ratione, saepe deserunt in, repellendus
          sequi, vero id fugit odio qui totam doloribus cupiditate asperiores.
          Fuga, sed odio.
        </div>
      </div>
    </div>
  </body>
</html>



Вот как должно это выглядеть

5e7eab8f6ff97263258921.jpeg


Естественно сейчас это выглядит вот так

5e7eae9d0ae4a634005765.jpeg


В общем вопрос, это вообще реально реализовать? Если да, то как?
  • Вопрос задан
  • 106 просмотров
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle Куратор тега CSS

Пока так, может придумаю лучше или кто-нибудь еще предложит что.
Ответ написан
@chudomozg Автор вопроса
Еще придумал решение на старом добром float. Но с ним всплывает очень много геммороя..
https://codepen.io/chudomozg/pen/VwLqyxG
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы