Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

03. Stay There Sidebargrid-template-columns: minmax(<min>, <max>) ...

Plays Nice With
Min: 150px / Max: 25%
This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space.
Drag Me! 

  .ex3 .parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
  }
Explore Original Code Sample on CodePen

Understanding a Grid Layout with HTML and CSS

In this blog post, we'll dissect a snippet of HTML and CSS code to help you understand how it creates a grid layout. This layout is responsive, meaning it adjusts based on the available space in the container. Let's break it down step by step.

The HTML Markup

    
  <div class="grid h-full w-full grid-cols-[minmax(150px,25%)_1fr]">
      <div class="break-words border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4 text-2xl" contenteditable>
          Min: 150px / Max: 25%
      </div>
      <div class="break-words border border-solid border-[color:var(--purple--b)] bg-[color:var(--purple)] p-4 text-2xl" contenteditable>
          This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space.
      </div>
  </div>

Breakdown:

  1. <div class="grid h-full w-full grid-cols-[minmax(150px,25%)_1fr]">: This is a div element with three classes. Let's break them down:

    • grid: This class applies a CSS grid layout to the element.
    • h-full: This class sets the height of the element to 100% of its parent container.
    • w-full: This class sets the width of the element to 100% of its parent container.
    • grid-cols-[minmax(150px,25%)_1fr]: This class defines the grid columns. It uses a CSS function minmax() to set a minimum and maximum size for the columns. In this case, the minimum size is 150px and the maximum size is 25% of the available space. The _1fr indicates that the second column takes up the remaining available space (1 fractional unit).

  2. <div class="break-words border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4 text-2xl" contenteditable>: This is the first child div element. Let's break down its classes and attributes:

    • break-words: This class allows words to break if they overflow the container.
    • border border-solid border-[color:var(--yellow--b)]: These classes apply a solid border with a custom color defined using CSS variables.
    • bg-[color:var(--yellow)]: This class sets the background color using a custom CSS variable.
    • p-4: This class adds padding of 4 units.
    • text-2xl: This class sets the font size to 2xl, which is a predefined size in the CSS framework being used.
    • contenteditable: This attribute makes the content of the element editable by the user.

  3. <div class="break-words border border-solid border-[color:var(--purple--b)] bg-[color:var(--purple)] p-4 text-2xl" contenteditable>: This is the second child div element, and it has similar classes and attributes as the first one. The only difference is the colors and content.

Understanding Tailwind CSS Classes

Tailwind CSS is a utility-first CSS framework that makes styling websites a breeze. In this article, we'll delve into the specific classes used in a code snippet to get a better understanding of how they work.

1. grid: This class establishes a grid container.

2. h-full: This class sets the height of the grid container to 100% of its parent's height.

3. w-full: This class sets the width of the grid container to 100% of its parent's width.

4. grid-cols-[minmax(150px,25%)_1fr]: This class sets the number of columns in the grid. It uses the minmax() function to define a column with a minimum width of 150 pixels and a maximum width of 25% of the container's width. The _1fr specifies that the second column should take up the remaining space (1 fractional unit).

5. break-words: This class allows words to break and wrap onto the next line if they are too long to fit in the container.

6. border: This class adds a border around the element.

7. border-solid: This class specifies that the border should be solid.

8. border-[color:var(--yellow--b)] and border-[color:var(--purple--b)]: These classes set the border color using custom CSS variables.

9. bg-[color:var(--yellow)] and bg-[color:var(--purple)]: These classes set the background color using custom CSS variables.

10. p-4: This class sets the padding of the element to 1.5rem (16 pixels).

11. text-2xl: This class sets the font size to 2rem (32 pixels).

12. contenteditable: This is an HTML attribute that allows the content of the element to be edited by the user.

This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space.

Conclusion

This HTML and CSS code creates a responsive grid layout with two columns. The first column has a fixed minimum width of 150px and a maximum width of 25% of the available space. The second column takes up the rest of the available space. Each column contains a div element with custom styling for borders, background colors, padding, and text size. The content inside these elements is editable by the user.

Feel free to customize the classes and attributes to suit your specific design needs!