Grid-блок, коротый формируется по контенту

86
09 июля 2021, 12:40

Народ, как сделать так, чтобы грид-блок формировался по контенту, а не просто по сетке, также без использования grid-col-start, end и тп. Мой код сейчас:

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2.5em;
Answer 1

Для данной ситуации проще использовать CSS Columns

Результат https://codepen.io/hisbvdis/pen/wvwPVVv

.container { 
  column-count: 2; 
  column-gap: 20px; 
} 
 
.item { 
  margin-bottom: 20px; 
  break-inside: avoid; 
  background: #ccc; 
}
<div class="container"> 
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed tempore consectetur facere temporibus, excepturi officia ipsum, nihil enim maxime dicta similique veniam sapiente voluptatem, iusto alias atque ea blanditiis sit dolor et. Nam libero deserunt, 
    accusamus aspernatur placeat vero deleniti dolore illum illo quos laudantium quas consequatur sapiente quidem excepturi?</div> 
  <div class="item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt, atque! Quasi consectetur quisquam animi dolorem saepe deleniti assumenda dolorum aliquid libero architecto. Inventore, nulla ullam dignissimos a accusamus perferendis voluptates animi 
    eos repellat saepe pariatur molestiae sit vero error? Aut, tempore dolorum, unde cumque vel rerum, nesciunt magni ut accusantium cupiditate quibusdam adipisci perspiciatis in blanditiis sunt. Ratione fugiat, quo dolor minus repellat atque, facilis 
    accusamus, explicabo assumenda autem ullam aliquam placeat obcaecati iste! Facere error perferendis temporibus nobis culpa porro sunt atque eaque earum placeat nihil eos unde saepe corporis, vero obcaecati esse, excepturi iure, iusto quidem! Neque 
    consequatur vero fuga quisquam tenetur? Deserunt reprehenderit maxime laboriosam. Temporibus doloremque fugiat odio, repudiandae, a explicabo autem quae deleniti cupiditate veniam aut quas voluptate ea! Quis, dolor in corporis mollitia unde provident 
    earum maxime aperiam voluptatibus autem suscipit rerum. Voluptatum, voluptate mollitia accusamus vel iste quis excepturi sapiente exercitationem ea at.</div> 
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ut iure aperiam repellendus nihil ipsa accusamus numquam nemo unde dicta hic placeat optio sunt, eveniet nulla, dolor veniam voluptatem sapiente facere ipsam tempore repellat eius! Nisi cupiditate 
    porro corporis omnis facere nobis soluta eum. Molestiae ipsam dignissimos libero illo fuga consequatur tempore. Maxime ea amet illum nostrum dolores itaque sequi ab ullam voluptatum! Aspernatur rem sint error quidem nemo laboriosam perspiciatis omnis, 
    voluptates beatae ipsa eaque pariatur totam velit voluptatum. In, quos obcaecati accusantium voluptate magnam explicabo qui? Optio mollitia provident reprehenderit nulla modi necessitatibus dolores quas sequi, vel quae eaque consequatur nam quis iste 
    et hic quasi, a maiores voluptas ab aspernatur fugit! Sint voluptates et accusantium voluptatem natus amet, fugit vitae debitis adipisci at cumque ipsum asperiores, deserunt, hic suscipit officiis vero dolor nesciunt eaque. Officiis quas maxime repellendus 
    accusantium, laborum velit nesciunt ad totam sint debitis alias labore minus. Nulla, ipsa. Facilis error necessitatibus minus odio vero, veniam, omnis consequuntur rerum tenetur corrupti repudiandae dolorem quidem fugit nostrum accusantium consectetur 
    repellendus molestiae reprehenderit perferendis modi sequi facere! Ex veniam architecto explicabo nostrum, numquam saepe culpa excepturi in consequatur, velit impedit. Illo, deserunt totam cupiditate libero aliquid ipsa!</div> 
  <div class="item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi, vitae voluptatem deserunt repellat quos distinctio voluptas repudiandae ratione, labore atque sequi! Ex soluta ratione laudantium.</div> 
  <div class="item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi, vitae voluptatem deserunt repellat quos distinctio voluptas repudiandae ratione, labore atque sequi! Ex soluta ratione laudantium.</div> 
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ut iure aperiam repellendus nihil ipsa accusamus numquam nemo unde dicta hic placeat optio sunt, eveniet nulla, dolor veniam voluptatem sapiente facere ipsam tempore repellat eius! Nisi cupiditate 
    porro corporis omnis facere nobis soluta eum. Molestiae ipsam dignissimos libero illo fuga consequatur tempore. Maxime ea amet illum nostrum dolores itaque sequi ab ullam voluptatum! Aspernatur rem sint error quidem nemo laboriosam perspiciatis omnis, 
    voluptates beatae ipsa eaque pariatur totam velit voluptatum. In, quos obcaecati accusantium voluptate magnam explicabo qui? Optio mollitia provident reprehenderit nulla modi necessitatibus dolores quas sequi, vel quae eaque consequatur nam quis iste 
    et hic quasi, a maiores voluptas ab aspernatur fugit! Sint voluptates et accusantium voluptatem natus amet, fugit vitae debitis adipisci at cumque ipsum asperiores, deserunt, hic suscipit officiis vero dolor nesciunt eaque. Officiis quas maxime repellendus 
    accusantium, laborum velit nesciunt ad totam sint debitis alias labore minus. Nulla, ipsa. Facilis error necessitatibus minus odio vero, veniam, omnis consequuntur rerum tenetur corrupti repudiandae dolorem quidem fugit nostrum accusantium consectetur 
    repellendus molestiae reprehenderit perferendis modi sequi facere! Ex veniam architecto explicabo nostrum, numquam saepe culpa excepturi in consequatur, velit impedit. Illo, deserunt totam cupiditate libero aliquid ipsa!</div> 
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed tempore consectetur facere temporibus, excepturi officia ipsum, nihil enim maxime dicta similique veniam sapiente voluptatem, iusto alias atque ea blanditiis sit dolor et. Nam libero deserunt, 
    accusamus aspernatur placeat vero deleniti dolore illum illo quos laudantium quas consequatur sapiente quidem excepturi?</div> 
</div>

READ ALSO
Подправить код. Представление числа в памяти компьютера

Подправить код. Представление числа в памяти компьютера

Задача: На языке C/C++ написать программу, которая запрашивает целое число (положительное, отрицательное или ноль), разрядность типа данных...

102
Устранение Memory Leak

Устранение Memory Leak

Я начинающий програмист, использующий С++(с надеждой в дальнейшем попасть в GameDev)Так вот, для собеседования была написана игра и хотелось устранить...

95