Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

04. Pile'm Highgrid-template-rows: auto 1fr auto

Plays Nice With
Header
Main
Footer Content
Drag Me! 

  .ex4 .parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
Explore Original Code Sample on CodePen

Creating a Dynamic Grid Layout with Tailwind CSS

Understanding the HTML Markup

<div class="grid h-full w-full grid-rows-[auto_1fr_auto]">
<header class="break-words border border-solid border-[color:var(--blue--b)] bg-[color:var(--blue)] p-4 text-2xl" contenteditable>
Header
</header>
<main class="break-words border border-solid border-[color:var(--coral--b)] bg-[color:var(--coral)] p-4 text-2xl" contenteditable>
Main
</main>
<footer class="break-words border border-solid border-[color:var(--purple--b)] bg-[color:var(--purple)] p-4 text-2xl" contenteditable>
Footer Content
</footer>
</div>

Breakdown of the HTML:

  1. <div class="grid h-full w-full grid-rows-[auto_1fr_auto]">: This div element serves as a container with the following characteristics:
    • It applies a grid layout using Tailwind CSS utility classes.
    • It takes up the full height and width of its parent element (h-full and w-full).
  2. <header>, <main>, <footer>: These are semantic HTML elements representing the header, main content, and footer sections of a webpage.
  3. class="break-words ... text-2xl": Each of these elements has several Tailwind CSS classes applied. Let's break down what each class does:
    • break-words: This class allows words to break and wrap onto the next line if they overflow the container.
    • border border-solid ...: These classes apply a solid border with a specified color and width.
    • bg-[color:var(--...)]: This sets the background color using a custom CSS variable.
    • p-4: This adds padding of size 4 (16px) on all sides of the element.
    • text-2xl: This sets the font size to 2xl, which is equivalent to 1.5rem.
  4. contenteditable: This attribute makes the content of each section editable by the user, allowing them to modify the text directly in the browser.

Tailwind CSS Magic

Tailwind CSS provides utility classes that allow for rapid development. Here are some key classes used in this example:

  • break-words: Helps with word wrapping in case of overflow.
  • border border-solid ...: Styles the borders with a specified color and width.
  • bg-[color:var(--...)]: Applies a background color using a custom CSS variable.
  • p-4: Adds padding of size 4 (16px) on all sides.
  • text-2xl: Sets the font size to 1.5rem.

Conclusion

By combining HTML with Tailwind CSS, we've created a dynamic grid layout with editable header, main content, and footer sections. This example demonstrates the power of Tailwind CSS in rapidly prototyping and styling web interfaces.

Remember, Tailwind CSS is highly customizable, so feel free to tweak the classes and styles to suit your specific project requirements.

Happy coding! 🚀