CSS Grid Template
<!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>
<style>
.container{
display: grid;
/* grid-template-columns: repeat(5,1fr); */
grid-gap: 0.4rem 0.2rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer'
;
}
.item{
border: 2px solid black;
background-color: rgb(102, 102, 192);
padding: 10px;
}
#navbar{
grid-area: navbar;
}
#aside{
grid-area: aside;
}
#section{
grid-area: section;
}
footer{
grid-area: footer;
}
</style>
<body>
<div class="container">
<div id="navbar" class="item">
Home AboutUs Services Blogs
</div>
<div id="aside" class="item">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Explicabo, provident quod? Provident saepe nesciunt, atque esse inventore
velit aliquam explicabo harum. Voluptatem autem ex cumque suscipit itaque placeat
distinctio iusto blanditiis ad consequatur. Nostrum autem qui odit optio dolorum totam molestiae
harum fugiat necessitatibus voluptates facere architecto, sit tempora saepe repellendus, placeat ducimus a explicabo hic excepturi error asperiores quaerat quae! Tenetur recusandae placeat, delectus praesentium asperiores
labore. Ut voluptates inventore, ratione fugit praesentium blanditiis eius suscipit natus quae
minima animi excepturi reiciendis molestias sit, hic minus! Ex architecto et sint, iste quam eligendi, fuga similique adipisci quod quasi est incidunt voluptas dignissimos cum consequuntur rerum nemo non provident at expedita distinctio sunt officia ullam. Libero nisi omnis recusandae incidunt officia deleniti amet similique inventore, velit ipsum vero, dolor facere, necessitatibus illum porro ut ex saepe excepturi. Obcaecati odio atque culpa? Totam, debitis voluptatum in laboriosam eum repellendus, cumque excepturi soluta, quia explicabo voluptatibus odit voluptatem corrupti eligendi veritatis impedit. Exercitationem, quidem suscipit. Ea, illum. Dignissimos voluptatem beatae incidunt, numquam ex modi ipsum, commodi ullam id vero non animi repellendus quod esse cumque inventore exercitationem sapiente nihil saepe. Magni
quisquam eaque accusantium. Explicabo eligendi totam quae sed minus voluptates fuga.
</div>
<div id="section" class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, dolorem pariatur. Optio fuga dolores atque laudantium deleniti quo maxime esse quasi necessitatibus numquam aliquid odio accusamus quam totam, voluptate tenetur a eaque sint dolorum eos consectetur illo sit et labore. Dicta incidunt eaque animi! Incidunt a minima quas sunt sit ipsa, voluptatibus asperiores harum nam, officia culpa perspiciatis vero iusto? Perspiciatis aut, alias consequatur cum quam dolores quas amet doloremque, ea praesentium quidem molestiae ipsum quisquam? Voluptatibus aliquid perferendis nobis a, doloremque cupiditate asperiores distinctio consequuntur eligendi natus magnam omnis iste quibusdam facere quasi amet facilis totam nihil quia ipsum in fugit aspernatur! Odio voluptate repudiandae ea, sunt debitis quae exercitationem, distinctio facere dolores, animi at qui? Blanditiis possimus odit ad nobis inventore laborum non laudantium autem deleniti voluptate sunt aspernatur, perspiciatis beatae mollitia optio maiores illum eaque architecto voluptates minus aliquam? Perferendis fugit harum laboriosam atque architecto consequatur incidunt culpa deleniti beatae, non ipsa vitae minus enim quaerat eaque. Nulla eum animi id beatae expedita facilis tempore qui labore earum culpa, excepturi cum. Error in dolore magnam, esse iure soluta. Iste ipsa minima quod blanditiis. Voluptatum delectus reprehenderit ipsum rem error suscipit eum architecto, quidem sequi ratione laudantium sed, eligendi eius porro in perferendis sit. Dolores nihil optio ratione error provident vel laboriosam unde at totam libero. Enim totam veniam, aperiam doloremque fuga reprehenderit debitis. Officiis est facere quas ad molestias dignissimos blanditiis repellendus veniam. Asperiores nulla magnam eum, expedita laboriosam maxime, culpa dignissimos voluptas sed error debitis aspernatur repellat ipsum sapiente a sit exercitationem molestiae, ut adipisci accusantium aut at est. Illo dolorem corporis eius expedita molestias temporibus quibusdam nam. Tempore sit asperiores, cumque eius esse nam. Pariatur, assumenda unde! Sunt minus, aperiam veniam adipisci debitis provident inventore modi delectus hic sed tenetur deleniti quae quis non laborum officia accusantium aliquid a totam ad nobis nulla velit saepe? Iure error excepturi aliquam ad distinctio est labore nostrum, voluptatibus veritatis. Provident ad possimus unde fuga distinctio perferendis architecto nam et accusantium neque? Ex, velit. Laudantium quos iure cumque id recusandae commodi impedit dignissimos, quasi a quam, doloribus dicta rerum numquam voluptatum. Eos voluptate rerum necessitatibus tempore error, perferendis autem mollitia illum veritatis quisquam debitis obcaecati ullam delectus nisi deleniti aperiam eum est provident vero, consectetur quidem. Minus blanditiis optio necessitatibus beatae nesciunt expedita tempora ut? Ex nostrum nisi facere vero exercitationem voluptas enim magni natus vitae, omnis recusandae nemo.
</div>
<footer class="item">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero perspiciatis, eius voluptatem ipsa quidem nisi.
</footer>
</div>
<!-- <div class="container"> -->
<!-- <div class="items"></div>
<div class="items">Items-1</div>
<div class="items">Items-2</div>
<div class="items">Items-3</div>
<div class="items">Items-4</div>
<div class="items">Items-5</div>
<div class="items">Items-6</div>
<div class="items">Items-7</div>
<div class="items">Items-8</div>
<div class="items">Items-9</div>
<div class="items">Items-10</div>
<div class="items">Items-11</div>
<div class="items">Items-12</div>
<div class="items">Items-13</div>
<div class="items">Items-14</div>
<div class="items">Items-15</div>
<div class="items">Items-16</div>
<div class="items">Items-17</div>
<div class="items">Items-18</div>
<div class="items">Items-19</div>
<div class="items">Items-20</div>
</div> -->
</body>
</html>
No comments:
Post a Comment