Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

09. Clamp On, Clamp Off, The Clamperclamp(<min>, <actual>, <max>)

Plays Nice With

Title Here

Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.

Drag Me! 

  .ex9 .parent {
    display: grid;
    place-items: center;
  }

  .ex9 .card {
    width: clamp(23ch, 50%, 46ch);
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  .ex9 .visual {
      height: 125px;
      width: 100%;
    }
Explore Original Code Sample on CodePen

Creating a Centered Grid Layout with Tailwind CSS

In this tutorial, we'll walk through the HTML and Tailwind CSS code provided to create a centered grid layout. This layout features a centered container with a border, a title, a colored box, and a paragraph of descriptive text. Let's break down the code step by step.

HTML Structure


<div class="grid h-full w-full place-items-center bg-[white]">
    <div
      class="flex w-[clamp(23ch,50%,46ch)] flex-col space-y-6 border border-solid border-[color:var(--purple--b)] bg-[color:var(--purple)] p-4"
    >
      <h1 class="text-2xl font-bold">Title Here</h1>
      <div
        class="h-[125px] w-full border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)]"
      ></div>
      <p>
        Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing
        elit. Sed est error repellat veritatis.
      </p>
    </div>
</div>

The HTML code starts with a grid container that occupies the full height and width of its parent element. Inside this grid, there's another <div> element with various Tailwind CSS classes applied to it to achieve the desired layout.

CSS Classes and Styles

Let's dissect the CSS classes and styles applied to the inner <div> element: 


<div
  class="flex w-[clamp(23ch,50%,46ch)] flex-col space-y-6 border border-solid border-[color:var(--purple--b)] bg-[color:var(--purple)] p-4"
>
  • flex: This makes the element a flex container, allowing its children to be laid out in a flexbox layout.
  • w-[clamp(23ch,50%,46ch)]: This sets the width of the element using the clamp function. It creates a responsive width that ranges from a minimum of 23ch to a maximum of 46ch, but doesn't exceed 50% of the parent element's width.
  • flex-col: This sets the flex direction to column, which means its children will be stacked vertically.
  • space-y-6: This adds vertical spacing between the children of the flex container. In this case, the space is 1.5rem.
  • border border-solid border-[color:var(--purple--b)]: This applies a border to the element. The border style is solid, and its color is defined using a custom CSS variable --purple--b.
  • bg-[color:var(--purple)]: This sets the background color of the element using the custom CSS variable --purple.
  • p-4: This adds padding to the element on all sides. The padding is 1rem.

Adding Content

Within this div, we add the content:


<h1 class="text-2xl font-bold">Title Here</h1>

We have an <h1> element with classes that style it as follows:

  • text-2xl: This sets the font size to 1.5rem.
  • font-bold: This makes the text bold.

Next, we have a colored box:


<div class="h-[125px] w-full border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)]"></div>

This <div> has the following classes:

  • h-[125px]: This sets the height of the element to 125px.
  • w-full: This makes the element take up the full width of its parent.
  • border border-solid border-[color:var(--yellow--b)]: This applies a border to the element. The border style is solid, and its color is defined using a custom CSS variable --yellow--b.
  • bg-[color:var(--yellow)]: This sets the background color of the element using the custom CSS variable --yellow.

Conclusion

With this HTML and Tailwind CSS code, you can create a centered grid layout with a title, a colored box, and descriptive text. This layout is designed to be responsive and visually appealing. Feel free to customize the colors, fonts, and other styles to suit your specific project. Happy coding!