Skip to content

Instantly share code, notes, and snippets.

@kirkegaard

kirkegaard/grid.html

Created October 11, 2015 20:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kirkegaard/77a9e11020ec7de00a0e to your computer and use it in GitHub Desktop.
Save kirkegaard/77a9e11020ec7de00a0e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grid.html
<!doctype html>
<html>
<head>
<title>hello world</title>
<style>
body, html {
margin: 0px;
padding: 0px;
}
p { border: 1px solid red; }
.row {
clear:both;
}
.row .col-20,
.row .col-25,
.row .col-33,
.row .col-50 {
float:left;
}
.col-20 {
width: 20%;
}
.col-25 {
width: 25%;
}
.col-33 {
width: 33.33333%;
}
.col-50 {
width: 50%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-50">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum minus, ullam quod, optio possimus vel, aspernatur deleniti sapiente esse animi nulla. Totam cumque voluptatibus nostrum corporis id. Voluptas praesentium, debitis.</p>
</div>
<div class="col-50">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officiis sit, doloribus architecto aliquam nemo, laboriosam accusantium deleniti consequatur ex nisi labore, error quisquam veniam minima incidunt fuga quod nobis.</p>
</div>
</div>
<div class="row">
<div class="col-33">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id mollitia deserunt, est nisi sunt atque repellendus libero? Fuga recusandae itaque, possimus accusamus, iusto, exercitationem molestiae adipisci corrupti, a veniam voluptate.</p>
</div>
<div class="col-33">
<p>Rem, blanditiis amet! Voluptatum quasi nulla non, eos facilis. Dolorem quaerat dicta veritatis beatae, ad obcaecati repellendus ipsa itaque consequatur commodi in ipsum sequi tempora perspiciatis tempore, id esse nihil?</p>
</div>
<div class="col-33">
<p>Perferendis quo in itaque ipsa voluptatum vitae necessitatibus ab totam alias quasi dicta, architecto, explicabo mollitia libero expedita ut, nesciunt ratione culpa! Explicabo, eius eaque ad ipsum minus dignissimos error.</p>
</div>
</div>
<div class="row">
<div class="col-25">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum ducimus animi tempore quis hic voluptatum deleniti, necessitatibus minima, culpa molestiae consectetur natus enim sequi nulla! Iusto temporibus soluta minima ex!</p>
</div>
<div class="col-25">
<p>Suscipit dolor non velit nulla cupiditate voluptas odit nobis iure, in porro ipsum molestias amet aspernatur, maxime, ea voluptate, earum nesciunt reiciendis a. Sed ut facere in non magni. Perferendis.</p>
</div>
<div class="col-25">
<p>Incidunt aliquam aut at esse dicta natus reprehenderit ipsam perspiciatis sequi eligendi, unde perferendis laborum minus eos ut ipsum quaerat officia debitis maiores corporis vero! Minima, dicta ad aspernatur corrupti?</p>
</div>
<div class="col-25">
<p>Quae, error iste totam nulla veniam corporis vero reprehenderit a, nobis. Quia veniam natus consectetur eius modi totam quam officiis, cumque perferendis, similique a repellendus. Nostrum, asperiores, doloribus! Debitis, eum.</p>
</div>
</div>
<div class="row">
<div class="col-20">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt sapiente quod commodi animi officia delectus, nulla ex voluptatibus laboriosam voluptates eveniet, autem aperiam dolorem officiis recusandae dolorum obcaecati quis? Provident!</p>
</div>
<div class="col-20">
<p>Ipsum sit cumque fugit quaerat obcaecati dolore, rem debitis deleniti. Minima a et vel odio odit quibusdam aspernatur obcaecati, temporibus fugiat possimus aperiam quaerat consectetur id fugit nostrum nam illum!</p>
</div>
<div class="col-20">
<p>Repudiandae provident debitis totam ullam quo delectus impedit dolorum aspernatur facere incidunt, accusamus quod tenetur corporis distinctio nihil pariatur cum laboriosam nesciunt aut ipsa, reprehenderit aliquam. Eos laudantium suscipit similique!</p>
</div>
<div class="col-20">
<p>Quidem quasi fugit optio atque dolorem, labore, aspernatur sit tempore ducimus itaque, in, porro molestiae sed a quaerat accusantium libero minus cupiditate numquam! Doloremque itaque vero porro odit? Voluptatibus, tempore.</p>
</div>
<div class="col-20">
<p>Perferendis, blanditiis, distinctio! Odit officia esse cumque unde. Commodi nam illum sunt dolore esse amet! Voluptatum eligendi dignissimos fuga quaerat perspiciatis tempore tenetur, rem maiores minima labore et excepturi odit.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment