Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

06. Kinda Like Tetrisgrid-template-columns: repeat(12, 1fr)

Plays Nice With
Span 12
Span 6
Span 4
Span 2
Drag Me! 

  .ex6 .parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .ex6 .span-12 {
    grid-column: 1 / span 12;
  }

  .ex6 .span-6 {
    grid-column: 1 / span 6;
  }

  .ex6 .span-4 {
    grid-column: 4 / span 4;
  }

  .ex6 .span-2 {
    grid-column: 3 / span 2;
  }

  /* centering text */
  .ex6 .section {
    display: grid;
    place-items: center;
    text-align: center
  }
Explore Original Code Sample on CodePen

Creating a Responsive Grid Layout with Tailwind CSS

In web development, creating responsive layouts is crucial for ensuring that your website looks great on various screen sizes and devices. One popular tool for achieving this is Tailwind CSS, a utility-first CSS framework. In this tutorial, we'll walk through an example of how to create a responsive grid layout using Tailwind CSS.

HTML Markup

    
        <div class="grid h-full w-full grid-cols-[repeat(12,1fr)] bg-[white]">
            <div class="col-[1_/_span_12] grid place-items-center border border-solid border-[color:var(--green--b)] bg-[color:var(--green)] p-4 text-center text-2xl">
                Span 12
            </div>
            <div class="col-[1_/_span_6] grid place-items-center border border-solid border-[color:var(--coral--b)] bg-[color:var(--coral)] p-4 text-center text-2xl">
                Span 6
            </div>
            <div class="col-[4_/_span_4] grid place-items-center border border-solid border-[color:var(--blue--b)] bg-[color:var(--blue)] p-4 text-center text-2xl">
                Span 4
            </div>
            <div class="col-[3_/_span_2] grid place-items-center border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4 text-center text-2xl">
                Span 2
            </div>
        </div>

Explanation

Let's break down the HTML markup and the associated Tailwind CSS classes used in this example.

1. <div> with Class grid

    
        <div class="grid h-full w-full grid-cols-[repeat(12,1fr)] bg-[white]">
        ...
        </div>
  • This is a <div> element that serves as the container for our grid layout.
  • class="grid" applies the Tailwind CSS grid utility.
  • h-full w-full sets the height and width to 100% of its parent element.
  • grid-cols-[repeat(12,1fr)] sets up a grid with 12 equal-width columns using the repeat function.
  • bg-[white] sets the background color to white.

2. Four Grid Items

Next, we have four <div> elements that will be placed within the grid container.

a. Span 12

    
        <div class="col-[1_/_span_12] grid place-items-center border border-solid border-[color:var(--green--b)] bg-[color:var(--green)] p-4 text-center text-2xl">
            Span 12
        </div>
  • class="col-[1_/_span_12] sets the column span to 1 out of 12, making it take up the entire row.
  • grid place-items-center centers the content both horizontally and vertically.
  • border border-solid border-[color:var(--green--b)] adds a solid border with a custom green color.
  • bg-[color:var(--green)] sets the background color to a custom green shade.
  • p-4 adds padding of 4 units around the content.
  • text-center centers the text horizontally.
  • text-2xl sets the text size to extra large.

Conclusion

By combining HTML markup with Tailwind CSS classes, we've created a responsive grid layout with different column spans. This layout will adapt to various screen sizes, providing a seamless user experience across devices. Tailwind CSS's utility-first approach makes it easy to build and customize layouts without writing extensive CSS code.