CSS Multiple Column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Columns</title>
<style>
.box {
width: 100%;
border: 1px solid crimson;
/* column-count: 3; we can use only one property between column-count and column-width at a time */
column-width: 250px; /* column width property automatically adjust the count of the columns */
column-gap: 40px;
column-rule-width: 10px;
column-rule-style: dashed;
column-rule-color: deepskyblue;
/* Same as above */
/* column-rule: 10px double violet; */
}
h1 {
column-span: all; /*This property have only two values all and none*/
}
</style>
</head>
<body>
<div class="box">
<h1>Heading Heading Heading Heading Heading Heading</h1>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe consequatur voluptate sed voluptas animi magni quidem nihil facere culpa at odit quos in fugit similique omnis unde aliquam atque, facilis tempore architecto itaque voluptatem ab ipsam impedit. Cupiditate, voluptates fugit. Fugiat adipisci at voluptas nisi pariatur. Vel nulla perspiciatis dolor, fugiat sed eius odit tenetur cumque et, exercitationem ipsa laborum vero temporibus maiores. Maiores, cupiditate ipsa error magni minima accusamus mollitia, dicta similique molestias sequi a nam iure eos. Impedit voluptate distinctio debitis deleniti magni autem placeat blanditiis aut non at adipisci quo velit quis ea delectus vero nesciunt sapiente minus cum quasi, pariatur perferendis perspiciatis saepe voluptatem? Laborum, quod aperiam. Rerum soluta id non minus eos quia blanditiis quam, maiores libero? Illo quas aliquid consequatur accusantium voluptatibus laboriosam dolore perspiciatis maxime sequi quisquam sed ipsam, saepe quidem facere optio error. Similique neque quidem harum officiis voluptatem. Assumenda natus veniam eius voluptatum accusamus quam expedita minus quisquam, ea libero incidunt vel, amet neque tempora earum facere voluptatem! Veniam ut reprehenderit explicabo blanditiis quo doloremque nisi quasi. Est sed aliquid delectus minima itaque eum, veniam earum velit ea saepe. Suscipit quibusdam culpa neque quas repellendus voluptate, adipisci numquam? Eius sit maxime commodi, voluptas incidunt quaerat asperiores amet accusantium harum, non cupiditate iste exercitationem, quod expedita enim eum? Quia magni culpa molestias nesciunt facere laborum unde maiores praesentium nostrum ipsa dolore quam incidunt quasi odio eius dicta tempora modi assumenda, expedita odit neque ratione explicabo qui placeat? Odit, dicta quidem. Ab consectetur, doloribus eos facilis laboriosam quis sunt fugiat ipsam dolor esse totam vel delectus voluptate sit quod debitis! Consequuntur dolore modi labore neque expedita. Dolor ratione perferendis aliquid esse facere repudiandae incidunt, dolorum, officiis aperiam architecto praesentium, rem ducimus? Quos, quisquam eum quo dolorem nam minima sint placeat nobis omnis quis maiores soluta natus totam necessitatibus quaerat debitis impedit magni iste officiis autem cumque consectetur. Voluptatibus est neque perferendis, amet ab quam doloremque laboriosam molestiae ut corrupti officia fugiat. Quidem iusto excepturi maxime vel atque obcaecati labore repellat omnis explicabo. Fugit repellat omnis voluptas provident ad quibusdam libero numquam repudiandae modi repellendus facere assumenda hic consequuntur mollitia a obcaecati, sed tenetur. Officiis dolore, et quia, odio impedit eaque fugit hic ut unde vero accusantium sequi. Rerum aliquam reiciendis iste ipsum rem soluta voluptas. Ipsa neque labore ab pariatur ducimus. Consequuntur veniam repudiandae similique necessitatibus temporibus earum voluptatibus laboriosam quod quo ipsam?
</div>
</body>
</html>
column and column-fill .....
No comments:
Post a Comment