/
Gists
/
Subgrid examples by Thirus (Rows and columns)
On gists
Subgrid examples by Thirus (Rows and columns)
•
Tailwind CSS
CSS
CSS trick
example1.html Raw #
<!-- https://play.tailwindcss.com/CF9WdM43Jf -->
<section class="bg-slate-900 min-h-screen text-slate-100">
<!-- Shopping Cart -->
<div class="rounded-md bg-slate-800 p-8 grid grid-cols-[auto_1fr_auto_auto_auto] gap-6">
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<p class="col-span-2">Product</p>
<p>Price</p>
<p>Quantity</p>
<p class="text-right">Total</p>
</div>
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<img
class="size-20 object-cover"
src="https://tinyurl.com/3r25tr36"
alt=""
/>
<div>
<h3 class="text-xl font-medium">
Stylish Tote Bag
</h3>
<p class="text-sm text-slate-400">
Women's Tote Bag Brown
</p>
<span class="text-sm text-slate-500">
#368798
</span>
</div>
<p class="text-slate-400">
$99.00
</p>
<label>
<input
class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
type="text"
value="1"
size="2"
/>
</label>
<p class="font-medium text-right">
$99.00
</p>
</div>
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<img
class="size-20 object-cover"
src="https://tinyurl.com/3pj5teex"
alt=""
/>
<div>
<h3 class="text-xl font-medium">
Sunglasses
</h3>
<p class="text-sm text-slate-400">
Wooden Frame
</p>
<span class="text-sm text-slate-500">
#756328
</span>
</div>
<p class="text-slate-400">
$102.00
</p>
<label>
<input
class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
type="text"
value="10"
size="2" />
</label>
<p class="font-medium text-right">
$1020.00
</p>
</div>
</div>
</section>example2.html Raw #
<!-- https://play.tailwindcss.com/UaP7mvDqHU -->
<section class="min-h-screen antialiased bg-slate-900 text-slate-200 text-sm">
<div class="p-6 bg-slate-900">
<div class="w-full grid grid-cols-3 grid-rows-[auto_1fr_auto_auto] gap-6">
<div class="p-6 bg-slate-700 shadow-xl rounded-lg grid grid-rows-subgrid row-span-4 gap-5">
<img
class="size-16 object-cover rounded-full"
src="https://images.pexels.com/photos/1310522/pexels-photo-1310522.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
<p class="text-slate-300 leading-relaxed">
This service revolutionized our project management process. Highly efficient and user-friendly.
</p>
<p class="font-semibold text-sm">Emily Johnson</p>
<span class="text-slate-400 text-sm -mt-4">Product Manager</span>
</div>
<div class="p-6 bg-slate-700 shadow-xl rounded-lg grid grid-rows-subgrid row-span-4 gap-5">
<img
class="size-16 object-cover rounded-full"
src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
<p class="text-slate-300 leading-relaxed">
This product has significantly boosted our team's productivity.
</p>
<p class="font-semibold text-sm">James Miller</p>
<span class="text-slate-400 text-sm -mt-4">CEO, ABC Company</span>
</div>
<div class="p-6 bg-slate-700 shadow-xl rounded-lg grid grid-rows-subgrid row-span-4 gap-5">
<img
class="size-16 object-cover rounded-full"
src="https://images.pexels.com/photos/1239288/pexels-photo-1239288.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
<p class="text-slate-300 leading-relaxed">
A fantastic tool that has streamlined our marketing efforts and saved us countless hours. Truly a game-changer!
</p>
<p class="font-semibold text-sm">Sarah Thompson</p>
<span class="text-slate-400 text-sm -mt-4">Marketing Director</span>
</div>
</div>
</div>
</section>
example3.html Raw #
<!-- https://play.tailwindcss.com/nybE8I6AQt
<section class="grid min-h-screen place-items-center bg-slate-900 text-sm text-slate-200 antialiased">
<!-- Dropdown menu -->
<div class="grid w-72 grid-cols-[auto,1fr,auto] gap-x-2 gap-y-4 rounded-xl bg-slate-800 p-4 text-sm shadow">
<!-- First menu item -->
<a class="col-span-3 grid grid-cols-subgrid" href="#">
<svg viewBox="0 0 20 20" class="mr-2 h-5 w-5 self-start fill-slate-400">
<path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
<path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
<div class="col-start-2">
<p>Open</p>
<span class="text-slate-400">Open the file in a new tab.</span>
</div>
</a>
<!-- Second menu item -->
<a class="col-span-3 grid grid-cols-subgrid" href="#">
<div class="col-start-2">
<p>Rename</p>
<span class="text-slate-400">Rename the file.</span>
</div>
</a>
<!-- Third menu item -->
<a class="col-span-3 grid grid-cols-subgrid" href="#">
<svg viewBox="0 0 20 20" class="mr-2 h-5 w-5 self-start fill-slate-400">
<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
</svg>
<div class="col-start-2">
<p>Delete</p>
<span class="text-sm/6 text-slate-400">Move the file to the trash.</span>
</div>
</a>
</div>
</section>