knoonrx/lista-em-colunas.html

## lista-em-colunas.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>teste</title>
    <style>
    ul {
        list-style: none;
        -moz-column-count: 4;
        -moz-column-gap: 20px;
        -webkit-column-count: 4;
        -webkit-column-gap: 20px;
        column-count: 4;
        column-gap: 20px;
    }
    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor.</li>
        <li>Aliquam, reiciendis, voluptas.</li>
        <li>Porro, voluptatibus, sequi.</li>
        <li>Quasi, sunt, velit.</li>
        <li>Nam, labore quas!</li>
        <li>Accusamus, vero, et.</li>
        <li>Hic dicta, inventore.</li>
        <li>In, ex, nihil!</li>
        <li>Dolorum esse, cupiditate.</li>
        <li>Ducimus repellat, voluptate.</li>
        <li>Dicta, esse, necessitatibus!</li>
        <li>Architecto, explicabo, illo.</li>
        <li>Maxime, ad obcaecati.</li>
        <li>Est, porro inventore?</li>
        <li>Ullam consectetur, sapiente!</li>
        <li>Quia, dolorum adipisci.</li>
        <li>Placeat reprehenderit, nihil.</li>
        <li>Iusto architecto, quam.</li>
        <li>Maxime, cupiditate, modi.</li>
        <li>Suscipit, eius iste.</li>
        <li>Delectus, at, eos.</li>
        <li>Iusto, obcaecati, quaerat.</li>
        <li>Deserunt, suscipit perspiciatis.</li>
        <li>Placeat, nostrum, molestias?</li>
        <li>Fuga, modi sint!</li>
        <li>Esse, reprehenderit, sed!</li>
        <li>Eum, quasi, repellendus.</li>
        <li>Nisi, non quos?</li>
        <li>Officia, ut fugit.</li>
        <li>Magnam ad, repellat.</li>
        <li>Id, adipisci, nobis?</li>
        <li>Nobis, iste, saepe?</li>
        <li>Officia, odit, nostrum.</li>
        <li>Fugit, obcaecati, dolor.</li>
        <li>Inventore, unde, possimus.</li>
        <li>Doloribus, porro, rem.</li>
        <li>Quod adipisci, doloremque?</li>
        <li>Provident, aspernatur, expedita.</li>
        <li>Ad, quam possimus?</li>
        <li>Rem, dolorum, magni.</li>
        <li>Debitis, ad, nihil.</li>
        <li>Aspernatur, voluptatibus sint?</li>
        <li>Alias, ex, rerum.</li>
        <li>Debitis, esse inventore.</li>
        <li>Magnam libero, dolores.</li>
        <li>Iusto, expedita, tempore.</li>
        <li>Laborum, hic, beatae!</li>
        <li>Esse, distinctio id!</li>
        <li>At, voluptatem magni.</li>
        <li>Doloribus, quo, incidunt!</li>
        <li>Nostrum, fuga, sed.</li>
        <li>Itaque, nemo, fugiat.</li>
        <li>Magnam vero, culpa.</li>
        <li>Possimus, doloribus, aspernatur.</li>
        <li>Culpa, voluptatum, mollitia?</li>
        <li>Tenetur eveniet, a.</li>
        <li>Maiores, dolorum laboriosam.</li>
        <li>Fugit, voluptate, eius?</li>
        <li>Fuga, saepe, facilis.</li>
        <li>Explicabo, dolorum, esse!</li>
        <li>Necessitatibus aspernatur, in.</li>
        <li>Doloribus optio, nam!</li>
        <li>Optio, alias, ut.</li>
        <li>Omnis, at, numquam.</li>
        <li>Quibusdam, voluptates, officia.</li>
        <li>Ab adipisci, esse!</li>
        <li>Eligendi, possimus, eum!</li>
        <li>Officia, praesentium, tempora.</li>
        <li>Iste quae, harum?</li>
        <li>Deserunt, nesciunt, eligendi.</li>
        <li>Tempora, similique, iusto.</li>
        <li>Sint porro, animi.</li>
        <li>Dolor, repellat, autem!</li>
        <li>Eius, voluptatibus, nihil!</li>
        <li>Recusandae, et, tempora.</li>
        <li>Quam expedita, inventore.</li>
        <li>Possimus beatae, rem?</li>
        <li>Consequuntur, neque, possimus?</li>
        <li>Obcaecati, ullam, officiis!</li>
        <li>Labore, expedita, sequi!</li>
        <li>Accusantium, libero, esse.</li>
        <li>Quaerat, nisi, cupiditate.</li>
        <li>Quos, nemo enim.</li>
        <li>Nostrum, quos commodi!</li>
        <li>Harum, molestias, doloribus.</li>
        <li>Esse, corrupti, repellendus.</li>
        <li>Nemo, veritatis, officia.</li>
        <li>Eos, modi ut.</li>
        <li>Voluptatum, illo, et.</li>
        <li>Suscipit, in, maxime.</li>
        <li>Ab, sapiente quae.</li>
        <li>Suscipit, officia, nam?</li>
        <li>Asperiores, laudantium velit!</li>
        <li>Dolor numquam, aut!</li>
        <li>Facilis, itaque, minus!</li>
        <li>Amet, quod, illum?</li>
        <li>Labore, saepe atque!</li>
        <li>Earum, doloremque aliquid.</li>
        <li>Maxime, porro, doloribus!</li>
        <li>Aliquid, eveniet, nemo.</li>
    </ul>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>teste</title>
	<style>
	ul {
	list-style: none;
	-moz-column-count: 4;
	-moz-column-gap: 20px;
	-webkit-column-count: 4;
	-webkit-column-gap: 20px;
	column-count: 4;
	column-gap: 20px;
	}
	</style>
	</head>
	<body>
	<ul>
	<li>Lorem ipsum dolor.</li>
	<li>Aliquam, reiciendis, voluptas.</li>
	<li>Porro, voluptatibus, sequi.</li>
	<li>Quasi, sunt, velit.</li>
	<li>Nam, labore quas!</li>
	<li>Accusamus, vero, et.</li>
	<li>Hic dicta, inventore.</li>
	<li>In, ex, nihil!</li>
	<li>Dolorum esse, cupiditate.</li>
	<li>Ducimus repellat, voluptate.</li>
	<li>Dicta, esse, necessitatibus!</li>
	<li>Architecto, explicabo, illo.</li>
	<li>Maxime, ad obcaecati.</li>
	<li>Est, porro inventore?</li>
	<li>Ullam consectetur, sapiente!</li>
	<li>Quia, dolorum adipisci.</li>
	<li>Placeat reprehenderit, nihil.</li>
	<li>Iusto architecto, quam.</li>
	<li>Maxime, cupiditate, modi.</li>
	<li>Suscipit, eius iste.</li>
	<li>Delectus, at, eos.</li>
	<li>Iusto, obcaecati, quaerat.</li>
	<li>Deserunt, suscipit perspiciatis.</li>
	<li>Placeat, nostrum, molestias?</li>
	<li>Fuga, modi sint!</li>
	<li>Esse, reprehenderit, sed!</li>
	<li>Eum, quasi, repellendus.</li>
	<li>Nisi, non quos?</li>
	<li>Officia, ut fugit.</li>
	<li>Magnam ad, repellat.</li>
	<li>Id, adipisci, nobis?</li>
	<li>Nobis, iste, saepe?</li>
	<li>Officia, odit, nostrum.</li>
	<li>Fugit, obcaecati, dolor.</li>
	<li>Inventore, unde, possimus.</li>
	<li>Doloribus, porro, rem.</li>
	<li>Quod adipisci, doloremque?</li>
	<li>Provident, aspernatur, expedita.</li>
	<li>Ad, quam possimus?</li>
	<li>Rem, dolorum, magni.</li>
	<li>Debitis, ad, nihil.</li>
	<li>Aspernatur, voluptatibus sint?</li>
	<li>Alias, ex, rerum.</li>
	<li>Debitis, esse inventore.</li>
	<li>Magnam libero, dolores.</li>
	<li>Iusto, expedita, tempore.</li>
	<li>Laborum, hic, beatae!</li>
	<li>Esse, distinctio id!</li>
	<li>At, voluptatem magni.</li>
	<li>Doloribus, quo, incidunt!</li>
	<li>Nostrum, fuga, sed.</li>
	<li>Itaque, nemo, fugiat.</li>
	<li>Magnam vero, culpa.</li>
	<li>Possimus, doloribus, aspernatur.</li>
	<li>Culpa, voluptatum, mollitia?</li>
	<li>Tenetur eveniet, a.</li>
	<li>Maiores, dolorum laboriosam.</li>
	<li>Fugit, voluptate, eius?</li>
	<li>Fuga, saepe, facilis.</li>
	<li>Explicabo, dolorum, esse!</li>
	<li>Necessitatibus aspernatur, in.</li>
	<li>Doloribus optio, nam!</li>
	<li>Optio, alias, ut.</li>
	<li>Omnis, at, numquam.</li>
	<li>Quibusdam, voluptates, officia.</li>
	<li>Ab adipisci, esse!</li>
	<li>Eligendi, possimus, eum!</li>
	<li>Officia, praesentium, tempora.</li>
	<li>Iste quae, harum?</li>
	<li>Deserunt, nesciunt, eligendi.</li>
	<li>Tempora, similique, iusto.</li>
	<li>Sint porro, animi.</li>
	<li>Dolor, repellat, autem!</li>
	<li>Eius, voluptatibus, nihil!</li>
	<li>Recusandae, et, tempora.</li>
	<li>Quam expedita, inventore.</li>
	<li>Possimus beatae, rem?</li>
	<li>Consequuntur, neque, possimus?</li>
	<li>Obcaecati, ullam, officiis!</li>
	<li>Labore, expedita, sequi!</li>
	<li>Accusantium, libero, esse.</li>
	<li>Quaerat, nisi, cupiditate.</li>
	<li>Quos, nemo enim.</li>
	<li>Nostrum, quos commodi!</li>
	<li>Harum, molestias, doloribus.</li>
	<li>Esse, corrupti, repellendus.</li>
	<li>Nemo, veritatis, officia.</li>
	<li>Eos, modi ut.</li>
	<li>Voluptatum, illo, et.</li>
	<li>Suscipit, in, maxime.</li>
	<li>Ab, sapiente quae.</li>
	<li>Suscipit, officia, nam?</li>
	<li>Asperiores, laudantium velit!</li>
	<li>Dolor numquam, aut!</li>
	<li>Facilis, itaque, minus!</li>
	<li>Amet, quod, illum?</li>
	<li>Labore, saepe atque!</li>
	<li>Earum, doloremque aliquid.</li>
	<li>Maxime, porro, doloribus!</li>
	<li>Aliquid, eveniet, nemo.</li>
	</ul>
	</body>
	</html>