<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime iure possimus nobis sequi amet ipsum deleniti accusantium exercitationem expedita reprehenderit vero asperiores inventore libero numquam nesciunt nam error aut aspernatur quos, ab temporibus, sed earum illo obcaecati. Suscipit vel unde itaque atque quisquam iste voluptate possimus placeat, ullam accusamus consequatur tempora amet ut similique inventore minima deleniti tenetur. Corrupti id mollitia ducimus? Adipisci placeat consequuntur rerum ipsa nam aspernatur fuga modi veniam quasi tempore cum error ab amet eligendi expedita iusto consectetur, repellat dolorum quibusdam tenetur. Eius quasi quia voluptates tenetur facilis illum excepturi, quis beatae, quod et at. Dolorum velit deserunt fugit dignissimos molestiae eius, laborum quis blanditiis doloribus debitis sequi ea animi repudiandae eum cum corrupti minima ullam. Cumque ab dolorem consequatur adipisci, eum eos at natus placeat explicabo sequi commodi earum vero enim, fugiat neque porro repellat unde ex quia accusamus, error repellendus totam necessitatibus. Esse quibusdam vitae necessitatibus repellendus pariatur officia reiciendis laudantium distinctio placeat, totam sunt officiis velit magni ex non tempore! Minima reiciendis, non, quod similique, asperiores sit quam inventore nisi consequatur ex cumque? Eos saepe cum voluptas sed blanditiis tenetur ducimus, eaque rem, molestias, perspiciatis temporibus. Aliquam atque saepe rerum accusantium laboriosam, adipisci a nihil molestias tenetur temporibus quasi et nemo obcaecati neque provident totam quam dolorum consequatur necessitatibus optio molestiae eos distinctio? Quas sint doloremque, repudiandae asperiores alias ea soluta distinctio, quaerat cum tempora obcaecati id quibusdam. Laboriosam officiis necessitatibus, quo vero qui quos odit debitis eligendi reprehenderit eius voluptas dignissimos quibusdam velit corporis. Pariatur excepturi suscipit sequi. Saepe consequuntur porro ea sequi commodi suscipit, inventore fuga, officia praesentium esse quidem id, maxime impedit? Laborum consequuntur iure eos, sunt enim sed atque odio eum necessitatibus! Incidunt ipsum ducimus corporis minus explicabo unde recusandae officiis minima quidem laudantium animi, sunt, itaque quia magnam nihil quaerat, quae a cum illum sequi reprehenderit quis optio. Sequi magnam eos similique. Debitis qui perferendis quidem, repellendus nam illo deserunt, perspiciatis dignissimos cumque ab velit, ut illum animi explicabo doloremque nesciunt ducimus! Quos mollitia voluptatum maiores ab. Facere itaque repellendus reiciendis, consequuntur ea eos dolorem amet deserunt impedit odit natus eum ducimus tempore, esse sed non temporibus quo nesciunt mollitia aliquid aut culpa sit recusandae aspernatur! Tempora et, fugiat corporis dolorem neque nam quae commodi, enim a laudantium iusto veniam sunt quis, numquam sit. Corporis illum laborum magni voluptatum rerum ipsa eaque labore nemo facere voluptates modi tempora, enim similique tempore. Magni repellendus deserunt hic quasi earum laboriosam. Cupiditate, fugiat nam voluptas iusto enim in exercitationem officia quae assumenda tempore commodi vero magni sint perspiciatis praesentium aperiam reprehenderit, laboriosam impedit? Cum, ratione dolor doloremque repudiandae debitis voluptatibus quaerat magnam rem dignissimos accusantium atque excepturi commodi numquam obcaecati tempore. Saepe exercitationem ipsa tempora quibusdam illo amet dignissimos, earum dolor culpa iste quasi explicabo dolorum ab, vel id consequuntur autem nulla ex, ducimus ipsam! Eum, ea. Quam harum incidunt consectetur fuga inventore optio aspernatur, laborum reiciendis? Necessitatibus, repellat laudantium? Laudantium quasi ea aut perspiciatis, repellendus odit aperiam vitae libero optio!</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad voluptate voluptas vel cumque aperiam nemo incidunt. Maxime voluptates temporibus, explicabo, quam numquam asperiores possimus sed, unde libero saepe ex exercitationem.</div>
<div class="box">Magni iste esse modi ea non ad unde, quibusdam dolorem nobis animi illo totam quasi natus fuga error doloremque! Commodi nisi minima tempore tempora nobis deserunt ab quia fugiat molestiae.</div>
<div class="box">Sapiente labore hic, explicabo repudiandae ea odit, quaerat sunt voluptate sint eum asperiores rerum, alias modi accusamus quam ipsum repellat consequuntur facere similique maiores eaque temporibus. Eius adipisci necessitatibus distinctio.</div>
<div class="box">Error vitae perferendis quasi. Odio veritatis soluta autem. Veniam modi suscipit nemo voluptatibus quae ratione nam neque quis, vel quasi voluptates minus iusto aspernatur. Impedit aspernatur animi at atque sit?</div>
<div class="box">Ratione voluptatem praesentium itaque consequuntur dolore illum magnam quis non blanditiis soluta sapiente reiciendis iusto sed molestiae quisquam, accusantium pariatur animi vero sequi facere dolor! Natus cum nobis quibusdam quas.</div>
<div class="box">Natus sit, reprehenderit cupiditate veniam id molestiae alias quis, nisi tenetur possimus hic eligendi nostrum praesentium eum laboriosam. Ducimus, beatae iste? Recusandae voluptatibus corrupti quis. Qui, mollitia consequatur. Repudiandae, corporis!</div>
<div class="box">Ducimus totam deserunt ut accusantium veniam voluptas tempore rerum tenetur rem, natus adipisci enim dolorum vero est qui distinctio aliquam corrupti quam asperiores minus! Id tempora sed ad sunt at!</div>
<div class="box">Magni dolorum at magnam aut iusto minus pariatur vero totam earum corporis nemo unde aliquid doloribus quo, blanditiis est sit architecto nulla itaque cumque laudantium, animi veniam nesciunt. Dolorum, rem!</div>
<div class="box">Ab sit explicabo modi totam tempore, fugit unde aut non neque minima quae libero, maiores alias consequuntur. Omnis, dignissimos obcaecati. Laudantium hic officiis accusantium at officia aliquam nulla unde amet!</div>
<div class="box">Quisquam quia exercitationem assumenda nobis earum vitae ut nostrum vero accusantium reiciendis natus error beatae accusamus sit illo quos temporibus, sequi unde amet facilis. Iusto dignissimos rem magnam vitae minus?</div>
<div class="box">Facilis, blanditiis atque. Alias maxime voluptas minus? Eligendi, sint amet quasi harum ut perspiciatis. Fuga nam, nostrum iure vitae aliquid dolorum reiciendis molestiae doloribus quo perferendis accusantium, cupiditate quos molestias?</div>
<div class="box">Aliquid rerum minima eos odit animi accusantium odio laboriosam ad, maiores suscipit voluptates culpa? Fugit ipsam, sit laboriosam modi voluptatem, iste iure vel labore sunt quisquam non dolor pariatur mollitia!</div>
<div class="box">Vitae, nisi mollitia suscipit quae optio repellat earum accusamus debitis officiis et delectus minima laudantium autem sed fuga obcaecati explicabo, eius omnis ipsum dolores repellendus? Dignissimos provident voluptatum libero quisquam!</div>
<div class="box">Voluptas et animi aspernatur, ad aut dolorum ea libero blanditiis! Quaerat natus quo quis cumque vitae architecto animi. Perspiciatis fugiat eius excepturi harum consectetur iure itaque dolores nisi enim asperiores!</div>
<div class="box">Esse fugiat maiores beatae nisi quas in facere quasi dolorem hic tempora? Quaerat, a deleniti beatae facilis ipsa molestias exercitationem voluptatum eligendi animi eveniet rerum optio, ex ea explicabo at!</div>
<div class="box">Dignissimos dolor neque dolore, consequatur omnis quos ratione aliquid, earum nam tenetur impedit ipsum sint nulla magnam nihil quia eos blanditiis suscipit aliquam sed. Mollitia laudantium deserunt veritatis quidem inventore.</div>
<div class="box">Et, corrupti. Ipsam exercitationem eius alias voluptates delectus. Ullam nostrum ipsum, beatae nesciunt laboriosam, vitae corporis dolores, exercitationem explicabo a repellat unde quidem delectus quam. Aperiam et tenetur repellendus vel?</div>
<div class="box">Similique quibusdam tenetur aspernatur vitae, tempore earum nulla culpa veniam minima voluptatem ducimus reiciendis cupiditate, corrupti rerum a eos hic nobis, atque expedita error accusamus. Est illo repellendus exercitationem maiores.</div>
<div class="box">Possimus officiis perspiciatis nesciunt! Suscipit sequi in optio non nulla velit? Porro aliquid numquam accusamus labore deleniti tempora ipsam, voluptatibus incidunt optio consequatur sequi soluta impedit dignissimos necessitatibus amet nesciunt.</div>
<div class="box">Unde, natus recusandae hic repellendus praesentium optio quo explicabo dicta adipisci, nulla modi laboriosam ad eaque consequatur molestias a animi doloribus perspiciatis officia. Sit ipsam pariatur reprehenderit eveniet architecto aut.</div>
<div class="box">Minus iure in neque. Dignissimos recusandae similique earum numquam blanditiis, repellat non hic. Unde enim quisquam sint maxime ad error adipisci sapiente, distinctio veniam recusandae minus soluta vel magnam ipsum.</div>
<div class="box">Fuga molestiae et vitae, eum hic eius officiis nihil nulla odit corrupti eligendi rem totam, magni suscipit, deserunt soluta quo quas porro nemo culpa in magnam maxime. Dolorem, ea repellendus.</div>
<div class="box">Dolorem odit incidunt, facere aliquid veritatis debitis ducimus consequatur magnam fugiat sunt delectus sequi aperiam provident culpa consequuntur quod id maxime impedit ab repellat repellendus labore? Quas error reiciendis asperiores.</div>
<div class="box">Saepe id doloremque voluptate minima, iure autem, magni quos velit dolores ut totam inventore, beatae quis perferendis exercitationem? Ab excepturi tempore impedit repellendus. Debitis repellat alias, molestiae eius quasi repellendus.</div>
body {
margin: 0;
font: 14px 'Segoe UI', Arial, Helvetica, sans-serif;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-template-rows: repeat(3, 1fr);
}
.content,
.box {
padding: 20px;
text-align: justify;
border: 1px dashed rgba(0, 0, 0, 0.2);
}
.content {
grid-column: 1 / -2;
grid-row: 1 / -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.