Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

08. Get Back In Linejustify-content: space-between

Plays Nice With

Title - Card 1

Medium length description with a few more words here.

Title - Card 2

Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Title - Card 3

Short Description.

Drag Me! 

  .ex8 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .ex8 .visual {
    height: 100px;
    width: 100%;
  }

  .ex8 .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-between;
  }

  .ex8 h3 {
    margin: 0
  }
Explore Original Code Sample on CodePen

Exploring a Tailwind CSS Grid Layout

In this tutorial, we will dissect a specific piece of HTML code along with its corresponding Tailwind CSS classes to create a grid layout. Let's break it down step by step. 

<div class="z-50 grid h-auto w-full grid-cols-[repeat(3,1fr)] gap-4 bg-white">
    <div class="flex flex-col justify-between space-y-5 border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4">
        <h3 class="text-lg font-bold">Title - Card 1</h3>
        <p contenteditable>
            Medium length description with a few more words here.
        </p>
        <div class="h-[100px] w-full border border-solid border-[color:var(--pink--b)] bg-[color:var(--pink)]"></div>
    </div>
    <div class="flex flex-col justify-between border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4">
        <h3 class="text-lg font-bold">Title - Card 2</h3>
        <p contenteditable>
            Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        </p>
        <div class="h-[100px] w-full border border-solid border-[color:var(--blue--b)] bg-[color:var(--blue)]"></div>
    </div>
    <div class="flex flex-col justify-between border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4">
        <h3 class="text-lg font-bold">Title - Card 3</h3>
        <p contenteditable>Short Description.</p>
        <div class="h-[100px] w-full border border-solid border-[color:var(--green--b)] bg-[color:var(--green)]"></div>
    </div>
</div>

Let's dissect this HTML code:

  • <div class="z-50 grid h-auto w-full grid-cols-[repeat(3,1fr)] gap-4 bg-white">

    • z-50: Sets the z-index to 50, ensuring the element appears on top of other elements.
    • grid: This class sets the display property to "grid", enabling a grid-based layout.
    • h-auto: Sets the height to auto, allowing the element to expand based on its content.
    • w-full: Sets the width to 100% of its parent element.
    • grid-cols-[repeat(3,1fr)]: This class defines the grid columns. It repeats the grid with 3 equal-width columns.
    • gap-4: Sets a gap of 1rem (16 pixels) between the grid items.
    • bg-white: Sets the background color to white.

  • Inside the main <div>, there are three child <div> elements, each representing a card.

    • Each of these child <div> elements has the following Tailwind CSS classes:
      • flex flex-col: This sets the display property to "flex" and arranges the child elements in a column layout.
      • justify-between: This class evenly distributes space between the child elements along the vertical axis.
      • space-y-5: Adds a vertical space of 1.25rem (20 pixels) between child elements.
      • border border-solid border-[color:var(--yellow--b)]: Adds a solid border with a dynamic color value using CSS variables.
      • bg-[color:var(--yellow)]: Sets the background color with a dynamic color value using CSS variables.
      • p-4: Adds padding of 1rem (16 pixels) to the card.
    • Inside each card, there are:
      • A <h3> element with classes text-lg font-bold for the card title.
      • A <p contenteditable> element for the card description.
      • A <div> element with classes h-[100px] w-full border border-solid border-[color:var(--...--b)] bg-[color:var(--...)] for the colored box.

By combining HTML and Tailwind CSS, we've created a visually appealing grid layout with dynamic colors and flexible card content. This example showcases how Tailwind CSS can be used to efficiently structure and style web pages.