| title | tags | |||||
|---|---|---|---|---|---|---|
Common Webpage Layouts With TailwindCSS Using CSS Grid & Flex box (w/ Code Examples) |
|
- CSS Grid: for the main page layout (header, main content, sidebar, footer)
- CSS Flexbox: for smaller components within those grid areas (like navigation menus, lists of items, or aligning content within a section)
- CSS Grid Container: The parent element that defines the grid layout using rows, columns, and gaps. It controls how child elements (grid items) are arranged.
- CSS Grid Item: A child element of a grid container. It is placed within the grid and can span across rows or columns based on the grid's setup.
| Grid Container Properties | Grid Item Properties |
|---|---|
| display | grid-column-start |
| grid-template-columns | grid-column-end |
| grid-template-rows | grid-row-start |
| grid-template-areas | grid-row-end |
| grid-template | grid-column |
| grid-column-gap | grid-row |
| grid-row-gap | grid-area |
| grid-gap | justify-self |
| justify-items | align-self |
| align-items | place-self |
| place-items | order |
| justify-content | z-index |
| align-content | |
| place-content | |
| grid-auto-columns | |
| grid-auto-rows | |
| grid-auto-flow | |
| grid |
- CSS Flexbox Container: The parent element that uses flexbox to control the layout of its child elements. It defines the flex behavior, such as direction, wrapping, and alignment.
- CSS Flexbox Item: A direct child of a flexbox container that follows the container's flex layout.
| Flexbox Container Properties | Flexbox Item Properties |
|---|---|
| display | order |
| flex-direction | flex-grow |
| flex-wrap | flex-shrink |
| flex-flow | flex-basis |
| justify-content | flex |
| align-items | align-self |
| align-content | |
| gap | |
| row-gap | |
| column-gap |
Important
If you design with Tailwind, check out SERP Blocks - it's the largest component library built on Tailwind & Shadcn
- One-Column Layout: Header/Footer + Content
- Two-Column Layout: Header/Footer + Content + Sidebar(Left|Right)
- Three-Column Layout: Header/Footer + Content + Sidebar (Left+Right)
- Dashboard Layout: Header/Footer + Content + Left Sidebar(Collapsible)
One-Column Layout: Header/Footer + Content
- A simple, stacked layout ideal for mobile devices and narrow screens
- Content flows vertically in a single column
TailwindCSS Implementation:
flex
<div class="flex flex-col min-h-screen">
<header class="bg-blue-500 p-4">Header</header>
<main class="flex-grow p-4">Content</main>
<footer class="bg-gray-300 p-4">Footer</footer>
</div>🔗 Click here to see it 🔗 Click here to see it in HTML+ CSS
Two-Column Layout: Header/Footer + Content + Sidebar(Right)
- Common for displaying content alongside a sidebar
- Typically switches to a single column on smaller screens
TailwindCSS Implementation:
flex
<div class="flex flex-col min-h-screen">
<header class="bg-blue-500 p-4">Header</header>
<div class="flex flex-col md:flex-row flex-grow">
<main class="flex-grow p-4 order-2 md:order-1">Content</main>
<aside class="w-full md:w-64 p-4 bg-gray-200 order-1 md:order-2">Sidebar</aside>
</div>
<footer class="bg-gray-300 p-4">Footer</footer>
</div>Two-Column Layout: Header/Footer + Content + Sidebar(Left)
- Common for displaying content alongside a sidebar
- Typically switches to a single column on smaller screens
TailwindCSS Implementation:
flex
<div class="flex flex-col min-h-screen">
<header class="bg-blue-500 p-4">Header</header>
<div class="flex flex-row flex-grow">
<aside class="w-64 p-4 bg-gray-200 hidden sm:block">Sidebar</aside>
<main class="flex-grow p-4">Content</main>
</div>
<footer class="bg-gray-300 p-4">Footer</footer>
</div>Three-Column Layout: Header/Footer + Content + Sidebar (Left+Right)
- Common for displaying documentation
TailwindCSS Implementation:
grid
<div class="grid min-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] md:grid-cols-[200px,1fr] lg:grid-cols-[200px,1fr,200px]">
<header class="col-span-full bg-blue-500 p-4">Header</header>
<aside class="hidden bg-gray-200 p-4 md:row-start-2 md:block">Left Sidebar</aside>
<main class="row-start-2 bg-white p-4 md:col-start-2">Content</main>
<aside class="hidden bg-gray-200 p-4 lg:row-start-2 lg:block">Right Sidebar</aside>
<footer class="col-span-full bg-gray-300 p-4">Footer</footer>
</div>Header/Footer + Content + Left Sidebar(Collapsible)
- Consists of a header/footer + main content area + collapsible left sidebar (for addl. naviation)
- Ideal for admin panels, data dashboards, and complex web applications
- Responsive design allows the sidebar to collapse on smaller screens
- Can be implemented effectively with CSS Grid
Grid Template Representation
display: grid;
grid-template-areas:
'nav header header'
'nav content sidebar'
'nav footer footer'TailwindCSS Implementation:
?
<!-- need an example of this one -->