Skip to content

Instantly share code, notes, and snippets.

@SiAce

SiAce/index.html

Created May 10, 2024 04:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SiAce/a7ec497d77500e32fca53ca8d03e02ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SiAce/a7ec497d77500e32fca53ca8d03e02ec to your computer and use it in GitHub Desktop.
Download ZIP
Webpage Grid Layout Tailwind
Raw
index.html
<div class="grid min-h-screen grid-cols-5 grid-rows-[3rem_minmax(3rem,_1fr)_3rem]">
<div class="sticky top-0 z-10 col-span-5">Header</div>
<div class="sticky top-[3rem] row-span-2 flex max-h-[calc(100vh-3rem)] flex-col gap-96 overflow-y-scroll">
<div>Sidebar</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="col-span-3">
Main
<div class="h-[200vh]">123</div>
</div>
<div class="sticky top-[3rem] row-span-2 flex max-h-[calc(100vh-3rem)] flex-col gap-96 overflow-y-scroll">
<div>Table of Contents</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="col-span-3">Footer</div>
</div>
@SiAce
Copy link
Author

SiAce commented May 10, 2024

https://play.tailwindcss.com/YenmM8PcFz

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment