Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

05. So Last Decadegrid-template: auto 1fr auto / auto 1fr auto

Plays Nice With
Header
Left Sidebar
Main Content
Right Sidebar
Footer
Drag Me! 

  .ex5 .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }
  
  .ex5 header {
    padding: 2rem;
    grid-column: 1 / 4;
  }

  .ex5 .left-side {
    grid-column: 1 / 2;
  }

  .ex5 main {
    grid-column: 2 / 3;
  }

  .ex5 .right-side {
    grid-column: 3 / 4;
  }

  .ex5 footer {
    grid-column: 1 / 4;
  }
Explore Original Code Sample on CodePen

Understanding a Responsive Grid Layout with HTML and CSS

In web development, creating responsive layouts is essential to ensure that your web pages look good and function well on various screen sizes and devices. In this blog post, we'll dissect a piece of HTML and CSS code to understand how a responsive grid layout is created. Let's dive in!

HTML Structure

<div class="grid h-full w-full">
    <header class="col-[1_/_4] border border-solid border-[color:var(--pink--b)] bg-[color:var(--pink)] p-4 text-2xl">
        Header
    </header>
    <div class="col-[1_/_2] break-words border border-solid border-[color:var(--blue--b)] bg-[color:var(--blue)] p-4 text-2xl" contenteditable>
        Left Sidebar
    </div>
    <main class="col-[2_/_3] break-words border border-solid border-[color:var(--coral--b)] bg-[color:var(--coral)] p-4 text-2xl" contenteditable>
        Main Content
    </main>
    <div class="col-[3_/_4] break-words border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4 text-2xl" contenteditable>
        Right Sidebar
    </div>
    <footer class="col-[1_/_4] border border-solid border-[color:var(--green--b)] bg-[color:var(--green)] p-4 text-2xl">
        Footer
    </footer>
</div>

CSS Classes

  • grid: Defines a container as a grid layout.
  • h-full and w-full: Ensure the grid container takes up full height and width.
  • col-[1_/_4], col-[1_/_2], etc.: Define column widths for elements within the grid.
  • break-words: Ensures long words or URLs break onto the next line.
  • contenteditable: Allows user content editing within an element.
  • border, border-solid, border-[color:var(--pink--b)]: Add borders with customizable color.
  • bg-[color:var(--pink)], bg-[color:var(--blue)], etc.: Set background colors using CSS variables.
  • p-4: Add padding for space between content and border.
  • text-2xl: Set text size to extra-large.

Sections Breakdown

The sections within the grid container include:

  • Header: Defines the page header.
  • Left Sidebar: Contains content on the left side.
  • Main Content: Holds the main body content.
  • Right Sidebar: Contains content on the right side.
  • Footer: Defines the page footer.

Understanding Tailwind CSS Classes

Let's break down each of these Tailwind classes:

  1. grid: This class sets the display property of the element to grid, allowing you to create a grid layout.
  2. h-full and w-full: These classes set the height and width of the element to 100% of its parent container, respectively.
  3. col-[1_/_4], col-[1_/_2], col-[2_/_3], col-[3_/_4], col-[1_/_4]: These classes define the column widths for the grid items. They are fractions of the total available space in the grid container.
  4. border, border-solid: These classes apply a solid border around the element.
  5. border-[color:var(--pink--b)], border-[color:var(--blue--b)], border-[color:var(--coral--b)], border-[color:var(--yellow--b)], border-[color:var(--green--b)]: These classes set the border color using custom CSS variables.
  6. bg-[color:var(--pink)], bg-[color:var(--blue)], bg-[color:var(--coral)], bg-[color:var(--yellow)], bg-[color:var(--green)]: These classes set the background color using custom CSS variables.
  7. p-4: This class sets the padding on all sides of the element to 1.5rem (which is equivalent to 4 units in the default spacing scale).
  8. text-2xl: This class sets the font size to 1.5rem (which is equivalent to the extra-large size in the default font size scale).
  9. break-words: This class allows long words to be broken and wrap onto the next line if they exceed the width of the element.
  10. contenteditable: This attribute makes the element editable by the user, similar to a text input field.

In summary, the provided code snippet creates a grid layout with five items (header, left sidebar, main content, right sidebar, and footer). Each item has a specified column width, border, background color, padding, and text size. The border colors are defined using custom CSS variables, providing flexibility for customization. The break-words class ensures that long words can wrap onto the next line. Additionally, the elements with the contenteditable attribute can be edited by the user.

Conclusion

Now that we've dissected the HTML and CSS code, you can use this as a foundation to create your responsive grid layouts. Experiment with different column widths and styling to achieve the desired look and feel for your web page. Happy coding!