Kinetic Component Library

Grid 

<div class="my-20 grid sm:grid-cols-2 gap-8 lg:gap-16">
    <div class="w-full h-40 bg-dark/20"></div>
    <div class="w-full h-40 bg-dark/20"></div>
</div>

<div class="my-20 grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
    <div class="w-full h-40 bg-dark/20"></div>
    <div class="w-full h-40 bg-dark/20"></div>
    <div class="w-full h-40 bg-dark/20"></div>
</div>

<div class="my-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
    <div class="w-full h-40 bg-dark/20"></div>
    <div class="w-full h-40 bg-dark/20"></div>
    <div class="w-full h-40 bg-dark/20"></div>
    <div class="w-full h-40 bg-dark/20"></div>
</div>
 
<div class="my-20 grid sm:grid-cols-2 gap-8 lg:gap-16">
	<div class="w-full h-40 bg-dark/20"></div>
	<div class="w-full h-40 bg-dark/20"></div>
</div>

<div class="my-20 grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
	<div class="w-full h-40 bg-dark/20"></div>
	<div class="w-full h-40 bg-dark/20"></div>
	<div class="w-full h-40 bg-dark/20"></div>
</div>

<div class="my-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
	<div class="w-full h-40 bg-dark/20"></div>
	<div class="w-full h-40 bg-dark/20"></div>
	<div class="w-full h-40 bg-dark/20"></div>
	<div class="w-full h-40 bg-dark/20"></div>
</div>
 
/* No context defined. */

No notes defined.