<!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>
Средний
