Grid-template-area:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer'
;
}
.item{
background-color: aquamarine;
padding: 1px 1px;
margin: 2px;
border: 1px solid black;
}
#navbar{
grid-area: navbar;
}
#section{
grid-area: section;
}
#aside{
grid-area: aside;
}
footer{
grid-area: footer;
}
</style>
<body>
<div class="container">
<div id="navbar" class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam provident placeat nisi. lorem300
</div>
<div id="section" class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laudantium illo voluptatum consectetur voluptatem. Quam praesentium itaque dolor dolorem qui molestias, error voluptate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, ducimus mollitia, nihil ipsum voluptas aliquam eveniet sint impedit voluptatem qui ea consequuntur. In, molestias iusto aspernatur explicabo exercitationem quibusdam expedita, illum odit blanditiis odio rem eligendi illo id repellendus dicta nobis nostrum facilis iste pariatur ipsum laborum? Doloremque vitae possimus quas non itaque iure tempore odio aliquid voluptatum assumenda, quasi reiciendis, quam, nobis unde totam reprehenderit eaque earum. Dolores quisquam praesentium nam velit et id temporibus, odio magni iure fuga, animi optio consequatur repellendus ad deserunt omnis ratione provident quis delectus adipisci, ipsum totam. Pariatur porro quidem ullam, iste iure praesentium corporis eaque fuga reiciendis dolores. Consequatur veniam quasi fugiat veritatis consectetur, odit ut eveniet fuga necessitatibus? Eaque iure voluptatem minus quia necessitatibus adipisci nihil suscipit impedit voluptatum veritatis unde numquam, sit provident explicabo quasi aliquid. Totam sequi vel blanditiis, molestias dolorem corporis praesentium vitae minus obcaecati nesciunt. Repudiandae quas necessitatibus aut repellat facilis officiis dicta eius tempora nihil, temporibus in maxime. Non dolor voluptatum fugiat voluptas magnam aut quos veritatis soluta molestias explicabo illum aspernatur, debitis voluptates distinctio? Accusamus blanditiis ea delectus facere quibusdam est inventore minus praesentium tempora possimus sequi in porro, corrupti dolores placeat aperiam molestias iusto? Assumenda ratione velit tempore asperiores modi, repellat molestias amet sapiente culpa tempora, aut in veniam odio itaque corporis nihil recusandae veritatis saepe numquam voluptate! Deleniti ad eveniet blanditiis totam doloremque a? Quidem fugit quas modi quod iusto, magnam quasi cum debitis atque laborum iure harum beatae minima optio, corporis officia et esse velit at corrupti tempore? Tempore nemo accusantium soluta? Maxime rem adipisci nisi laudantium architecto ipsa veniam animi asperiores consequatur nam qui, ullam itaque numquam fuga soluta odit laboriosam quibusdam beatae non distinctio! Aspernatur debitis natus sapiente doloremque distinctio. Dolore accusantium saepe quae necessitatibus asperiores dolores numquam? Nulla, commodi!</div>
<div id="aside" class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex temporibus obcaecati neque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt esse dolor quidem perspiciatis consequuntur laborum rem facilis ea numquam neque, assumenda officia repudiandae enim beatae alias expedita ad? Minus, dolore commodi, corporis natus placeat atque laboriosam voluptatem asperiores, optio delectus necessitatibus eligendi animi deserunt reprehenderit qui numquam. Iste, necessitatibus laborum. Quasi hic, harum saepe repudiandae mollitia eius odit? Possimus perspiciatis repellendus, quaerat iusto minus vero obcaecati doloremque dicta nam aspernatur rerum enim, et voluptate temporibus vel atque ratione tempore quis voluptatibus? Consequuntur, delectus ea repudiandae doloribus voluptatem provident iste? Minima maxime quia odit porro reiciendis delectus a dolorum quis modi nisi ex sit accusantium veritatis laboriosam quas, dicta nostrum corrupti magni neque similique ipsam quisquam. Assumenda vitae quas corrupti repellat. Dolorem vel quibusdam nulla distinctio quas fugit velit cumque doloremque nam qui, minima sint facilis, cupiditate ipsum ratione! Hic perferendis ea aut quas dolor alias praesentium voluptate quod provident optio, repellat sed mollitia molestiae accusantium autem aliquid laborum ipsam. Sint aliquam, a praesentium rerum, laboriosam quasi magnam nostrum at necessitatibus laborum tenetur aliquid nisi numquam id harum! Possimus saepe nobis omnis? Velit laboriosam exercitationem delectus natus id aspernatur. In quasi at repellat, vitae doloremque iusto ea alias dolorum neque unde quisquam iste maxime aperiam reiciendis ab dignissimos voluptatibus. Repudiandae praesentium, nam obcaecati totam quidem iste alias, eveniet harum quibusdam aperiam, voluptatibus libero dolorum enim. Nobis similique harum numquam exercitationem atque, in iste pariatur velit placeat deleniti, quod necessitatibus fugiat architecto expedita modi eos laboriosam dolorem impedit totam corporis facilis cumque! Quisquam consequuntur mollitia veritatis perspiciatis vero est omnis aspernatur optio recusandae eveniet ex blanditiis ullam quos aliquam, iure sequi reiciendis rerum ipsam magni distinctio illo dicta temporibus? Repellat asperiores laborum ratione expedita quo autem nobis dicta, excepturi fugiat aut ut impedit corrupti dolor eos cupiditate ullam! Consequatur eos reiciendis perspiciatis?</div>
<footer class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, facilis?</footer>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.