Modern CSS Layouts with Nuxt 3 and Tailwind CSS*

10 Modern CSS layout and sizing techniques

*Full Disclaimer - This site was adapted from 1-Line Layouts and rebuilt for educational purposes with Nuxt 3, Tailwind CSS and ChatGPT (to help write all that HTML).

01. Wha Bam, Centered!place-items: center

Plays Nice With
:)
Drag Me! 

  .ex1 .parent {
    display: grid;
    place-items: center;
  }
Explore Original Code Sample on CodePen

Placed it like a Rockstar

place-items: center

place-items-center is a utility class in Tailwind CSS that is used to horizontally and vertically center the items within a grid or flex container. It applies both justify-items: center and align-items: center CSS properties.

In the provided code, place-items-center is used in both the outer and inner div elements. In the outer div, it ensures that any content within it will be both horizontally and vertically centered. This is useful for cases where you want to center a block of content within its parent container.

In the inner div, place-items-center again centers the content both horizontally and vertically. This ensures that the text inside the inner div is positioned at the center of the container.

Overall, place-items-center is a convenient and commonly used class for achieving centered layouts in web development, providing an easy way to control alignment within a grid or flex container.

This HTML code employs Tailwind CSS classes to create a centered grid container with a specific layout and styling:

  • Grid Container (<div class="grid h-full min-h-[200px] w-full place-items-center border border-solid border-[var(--pink--b)] bg-[var(--pink)]">):
    • grid: Establishes a grid layout for its children.
    • h-full: Ensures the container takes up the full height of its parent.
    • min-h-[200px]: Sets a minimum height of 200 pixels to prevent the container from becoming too small.
    • w-full: Makes the container take up the entire width of its parent.
    • place-items-center: Centers its children both horizontally and vertically.
    • border border-solid border-[var(--pink--b)]: Adds a solid border with a color defined by a custom CSS variable (--pink--b).
    • bg-[var(--pink)]: Sets the background color with a custom CSS variable (--pink).

Inside this container, there's a nested element:

  • Editable Content Element (<div class="grid place-items-center break-words rounded-2xl border border-dashed border-[var(--blue--b)] bg-[var(--blue)] p-4 text-base" contenteditable>):
    • grid: Applies grid layout to its children.
    • place-items-center: Centers its children both horizontally and vertically.
    • break-words: Allows words to break across lines if they're too long to fit on one line.
    • rounded-2xl: Rounds the corners with a high radius.
    • border border-dashed border-[var(--blue--b)]: Adds a dashed border with a color defined by a custom CSS variable (--blue--b).
    • bg-[var(--blue)]: Sets the background color with a custom CSS variable (--blue).
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).
    • text-base: Sets the font size to a base size (usually 1rem).

The contenteditable attribute makes this element editable by the user, allowing them to input and edit text directly in the browser.

In summary, this code creates a visually appealing container with a specific color scheme and border styles. The nested element inside is designed to allow editable content. The use of Tailwind CSS classes streamlines the styling process and enables quick adjustments.

Find out more ...

02. Lilypadsflex: 0 1 <baseWidth>

Plays Nice With
1
2
3
Drag Me! 

  .ex2 .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ex2 .box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
  }
Explore Original Code Sample on CodePen

Let's get Flexible

flex: 0 1 <baseWidth>

In Tailwind CSS, flex-[0_1_150px] is a utility class that allows for fine-grained control over the behavior of a flex item within a flex container. This class is part of the responsive design utilities in Tailwind.

Breaking down flex-[0_1_150px]:

  1. Flex Grow (flex-grow): 0 means that the item will not grow beyond its initial size. It won't take up any additional available space in the flex container.
  2. Flex Shrink (flex-shrink): 1 indicates that the item can shrink if necessary. This means it's allowed to become smaller if there's not enough space in the container.
  3. Flex Basis (flex-basis): 150px sets the initial size of the item before any extra space is distributed. In this case, the item starts with a width of 150 pixels.

This utility class is particularly useful in situations where you want an item to be flexible in its width but have a minimum width specified (150px in this case). It allows the item to shrink if necessary, but it won't grow beyond its initial size.

Additionally, the class name includes square brackets [] which are used in Tailwind to apply utility classes with specific values or configurations.

Remember, Tailwind CSS emphasizes utility-first development, allowing for rapid prototyping and flexible design systems.

This HTML code uses Tailwind CSS classes to create a flexible grid layout with three numbered boxes, each with specific styling:

  • Flex Container (<div class="flex h-full w-full flex-wrap justify-center bg-[white]">):
    • flex: Makes the container a flex container, allowing its children to be arranged in a flex layout.
    • h-full w-full: Makes the container take up the full height and width of its parent element.
    • flex-wrap: Allows the flex items to wrap onto multiple lines if they can't fit in a single line.
    • justify-center: Horizontally centers the flex items within the container.
    • bg-[white]: Sets the background color of the container to white.

Within this container, there are three numbered boxes:

  1. Box 1 (<div class="m-[5px] grid flex-[0_1_150px] place-items-center rounded-2xl border border-solid border-[color:var(--green--b)] bg-[color:var(--green)] p-4 text-[2rem]">):

    • m-[5px]: Adds a margin of 5 pixels around the box.
    • grid: Applies a grid layout to its children.
    • flex-[0_1_150px]: This is a custom configuration. It likely sets the flex properties for this box. The exact behavior would depend on any custom CSS applied.
    • place-items-center: Centers its children both horizontally and vertically.
    • rounded-2xl: Rounds the corners with a high radius.
    • border border-solid border-[color:var(--green--b)]: Adds a solid border with a color defined by a custom CSS variable (--green--b).
    • bg-[color:var(--green)]: Sets the background color with a custom CSS variable (--green).
    • p-4: Adds padding of 4 units (16 pixels).
    • text-[2rem]: Sets the text size to 2rem.

  2. Box 2 and 3 (<div class="...">2</div> and <div class="...">3</div>):

    • These boxes have similar classes to Box 1 with variations in text content.

In summary, this code creates a visually appealing grid layout with three numbered boxes, each with distinct styling. The use of Tailwind CSS classes streamlines the styling process and allows for quick adjustments.

Find out more ...

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

Oh, It gets bigger too

grid-template-columns: minmax(<min>, <max>) ...

The Tailwind CSS class grid-cols-[minmax(150px,25%)_1fr] is a utility class that defines the column template for a grid container. Let's break it down:

  • grid-cols-[minmax(150px,25%)_1fr]:
    • grid-cols: This class sets the number of columns in the grid.
    • [minmax(150px,25%)_1fr]: This is a custom configuration for defining the grid columns.

Breaking down [minmax(150px,25%)_1fr]:

  • minmax(150px, 25%) is a function that sets the range of acceptable column sizes. In this case, it specifies that the columns can be anywhere from a minimum of 150 pixels to a maximum of 25% of the available space.

  • 1fr is a fractional unit that represents a share of the available space. In this context, it means that one column will take up the remaining available space after accounting for the minimum and maximum sizes specified in minmax(150px, 25%).

In practical terms, this class will result in a grid with a flexible number of columns. Each column will have a minimum width of 150 pixels, but can also grow up to 25% of the available space. The remaining space will be divided equally among the columns, thanks to the 1fr unit.

This utility class is particularly useful for creating responsive and adaptive grid layouts where you want to maintain a minimum column width while allowing for flexibility in how the columns expand to fill the available space.

This HTML code employs Tailwind CSS classes to create a grid layout with two editable content elements, each with specific styling:

  • Grid Container (<div class="grid h-full w-full grid-cols-[minmax(150px,25%)_1fr]">):
    • grid: Establishes a grid layout for its children.
    • h-full w-full: Makes the container take up the entire height and width of its parent element.
    • grid-cols-[minmax(150px,25%)_1fr]: Defines the grid columns. The first column has a minimum width of 150 pixels, or 25% of the available space, whichever is greater. The second column takes up the remaining available space (1fr).

Inside this container, there are two editable content elements:

  1. Editable Content Element 1 (<div class="break-words border border-solid border-[color:var(--yellow--b)] bg-[color:var(--yellow)] p-4 text-2xl" contenteditable>):

    • break-words: Allows words to break across lines if they're too long to fit on one line.
    • border border-solid border-[color:var(--yellow--b)]: Adds a solid border with a color defined by a custom CSS variable (--yellow--b).
    • bg-[color:var(--yellow)]: Sets the background color with a custom CSS variable (--yellow).
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).
    • text-2xl: Sets the font size to 2xl (or 1.5rem).
    • contenteditable: Makes this element editable by the user, allowing them to input and edit text directly in the browser.

  2. Editable Content Element 2 (<div class="break-words border border-solid border-[color:var(--purple--b)] bg-[color:var(--purple)] p-4 text-2xl" contenteditable>):

    • Similar to the first element, but with different border and background colors. It also contains descriptive text.

In summary, this code creates a visually appealing grid layout with two editable content elements, each with distinct styling. The use of Tailwind CSS classes streamlines the styling process and allows for quick adjustments. The grid columns are defined with specific width constraints for responsive design. The editable content elements provide a user-friendly interface for inputting and editing text directly in the browser.

Find out more ...

04. Pile'm Highgrid-template-rows: auto 1fr auto

Plays Nice With
Header
Main
Footer Content
Drag Me! 

  .ex4 .parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
Explore Original Code Sample on CodePen

Bookend that Stack

grid-template-rows: auto 1fr auto

The Tailwind CSS class grid-rows-[auto_1fr_auto] is a utility class used to define the row template for a grid container. Let's break down what this class means:

  • grid-rows-[auto_1fr_auto]:

    • grid-rows: This class sets the number of rows in the grid.

  • [auto_1fr_auto]: This is a custom configuration for defining the grid rows.

Breaking down [auto_1fr_auto]:

  • auto is a value that indicates that the row's height should be determined by its content. In other words, the row will adjust its height automatically based on the content it contains.

  • 1fr is a fractional unit that represents a share of the available space. In this context, it means that one row will take up the remaining available vertical space after accounting for the auto rows.

In practical terms, grid-rows-[auto_1fr_auto] will result in a grid with three rows. The first and third rows will have their heights determined by their content (auto), while the second row will take up the remaining vertical space (1fr), effectively expanding to fill any available space.

This utility class is particularly useful when you want to create a flexible grid layout with specific height configurations for certain rows, while allowing others to adapt to their content. This can be beneficial for responsive design, especially in cases where you want some rows to adjust based on content, but also have other rows take up a specified portion of the available space.

This HTML code uses Tailwind CSS classes to create a grid layout with three editable content elements (header, main, and footer), each with specific styling:

  • Grid Container (<div class="grid h-full w-full grid-rows-[auto_1fr_auto]">):
    • grid: Establishes a grid layout for its children.
    • h-full w-full: Makes the container take up the entire height and width of its parent element.
    • grid-rows-[auto_1fr_auto]: Defines the grid rows. The first and third rows will automatically size based on their content, while the second row will take up the remaining available space (1fr).

Inside this container, there are three editable content elements:

  1. Header Element (<header class="...">):

    • break-words: Allows words to break across lines if they're too long to fit on one line.
    • border border-solid border-[color:var(--blue--b)]: Adds a solid border with a color defined by a custom CSS variable (--blue--b).
    • bg-[color:var(--blue)]: Sets the background color with a custom CSS variable (--blue).
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).
    • text-2xl: Sets the font size to 2xl (or 1.5rem).
    • contenteditable: Makes this element editable by the user, allowing them to input and edit text directly in the browser.

  2. Main Element (<main class="...">):

    • Similar to the header element, but with different border and background colors. It also contains descriptive text.

  3. Footer Element (<footer class="...">):

    • Similar to the header element, but with different border and background colors. It also contains descriptive text.

In summary, this code creates a visually appealing grid layout with three editable content elements (header, main, and footer), each with distinct styling. The use of Tailwind CSS classes streamlines the styling process and allows for quick adjustments. The grid rows are defined with specific height constraints for responsive design. The editable content elements provide a user-friendly interface for inputting and editing text directly in the browser.

Find out more ...

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

The Original

grid-template: auto 1fr auto / auto 1fr auto

The Tailwind CSS class grid-template: auto 1fr auto / auto 1fr auto is a utility that defines the template for both rows and columns in a grid container. This class is shorthand for setting both grid-template-rows and grid-template-columns at the same time. Let's break it down:

  • grid-template: auto 1fr auto / auto 1fr auto:
    • The first part (auto 1fr auto) defines the rows.
    • The second part (auto 1fr auto) defines the columns.

Breaking down auto 1fr auto / auto 1fr auto:

  • Rows (auto 1fr auto):

    • The first and third rows will have their heights determined by their content (auto), meaning they'll adjust based on the content they contain.
    • The second row will take up the remaining vertical space (1fr), effectively expanding to fill any available space.

  • Columns (auto 1fr auto):

    • The first and third columns will have their widths determined by their content (auto), meaning they'll adjust based on the content they contain.
    • The second column will take up the remaining horizontal space (1fr), effectively expanding to fill any available space.

In summary, this utility class will result in a grid with three rows and three columns. The first and third rows and columns will adjust based on their content, while the second row and column will expand to fill any available space.

This class is particularly useful when you want a flexible grid layout with specific size configurations for certain rows and columns, while allowing others to adapt to their content. It's a powerful tool for creating responsive and adaptive grid-based layouts.

This HTML code employs Tailwind CSS classes to create a centered grid container with a specific layout and styling:

  • Grid Container (<div class="grid h-full min-h-[200px] w-full place-items-center border border-solid border-[var(--pink--b)] bg-[var(--pink)]">):
    • grid: Establishes a grid layout for its children.
    • h-full: Ensures the container takes up the full height of its parent.
    • min-h-[200px]: Sets a minimum height of 200 pixels to prevent the container from becoming too small.
    • w-full: Makes the container take up the entire width of its parent.
    • place-items-center: Centers its children both horizontally and vertically.
    • border border-solid border-[var(--pink--b)]: Adds a solid border with a color defined by a custom CSS variable (--pink--b).
    • bg-[var(--pink)]: Sets the background color with a custom CSS variable (--pink).

Inside this container, there's a nested element:

  • Editable Content Element (<div class="grid place-items-center break-words rounded-2xl border border-dashed border-[var(--blue--b)] bg-[var(--blue)] p-4 text-base" contenteditable>):
    • grid: Applies grid layout to its children.
    • place-items-center: Centers its children both horizontally and vertically.
    • break-words: Allows words to break across lines if they're too long to fit on one line.
    • rounded-2xl: Rounds the corners with a high radius.
    • border border-dashed border-[var(--blue--b)]: Adds a dashed border with a color defined by a custom CSS variable (--blue--b).
    • bg-[var(--blue)]: Sets the background color with a custom CSS variable (--blue).
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).
    • text-base: Sets the font size to a base size (usually 1rem).

The contenteditable attribute makes this element editable by the user, allowing them to input and edit text directly in the browser.

In summary, this code creates a visually appealing container with a specific color scheme and border styles. The nested element inside is designed to allow editable content. The use of Tailwind CSS classes streamlines the styling process and enables quick adjustments.

Find out more ...

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

Flexy Columns

grid-template-columns: repeat(12, 1fr)

The Tailwind CSS class grid-cols-[repeat(12,1fr)] is a utility class that sets the column template for a grid container. Let's break it down:

  • grid-cols-[repeat(12,1fr)]:
    • grid-cols: This class sets the number of columns in the grid.
    • [repeat(12,1fr)]: This is a custom configuration for defining the grid columns.

Breaking down [repeat(12,1fr)]:

  • repeat(12,1fr) is a function that generates a pattern of column sizes. In this case, it creates a pattern of 12 columns, each taking up an equal fraction of the available space (1fr).

In practical terms, grid-cols-[repeat(12,1fr)] will result in a grid with 12 equally sized columns. This is often used in cases where you want a responsive grid with a consistent number of columns that adapt to different screen sizes.

This class is particularly useful for creating grid-based layouts with a specific number of columns that maintain their proportions and adapt to various screen sizes. It provides a flexible foundation for arranging content in a visually appealing and responsive manner.

This Tailwind CSS code creates a full-height and full-width grid container with 12 equally sized columns. Each column's width is determined by the 1fr unit, distributing the available space evenly. The background color of the container is set to white.

Inside the grid container, there are four div elements, each with different classes for controlling their column placement and styling:

  1. The first div has a class of col-[1_/_span_12], which means it spans across all 12 columns. It's centered both vertically and horizontally, and has a green border and background color. The text is centered and set to 2xl size.

  2. The second div has a class of col-[1_/_span_6], indicating it spans 6 columns. It's also centered both vertically and horizontally, but this time with a coral border and background color. The text is centered and set to 2xl size.

  3. The third div has a class of col-[4_/_span_4], spanning 4 columns. It's centered both vertically and horizontally, with a blue border and background color. The text is centered and set to 2xl size.

  4. The fourth div has a class of col-[3_/_span_2], spanning 2 columns. It's centered both vertically and horizontally, with a yellow border and background color. The text is centered and set to 2xl size.

This code creates a visually balanced grid layout with distinct regions, each spanning different proportions of the available columns. The custom color schemes and centering ensure each section stands out within the grid.

Find out more ...

07. You Repeat Megrid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

Plays Nice With
1
2
3
4
Drag Me! 

  .ex7 .parent {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
Explore Original Code Sample on CodePen

Over and Over and Over Again

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

The Tailwind CSS class grid-cols-[repeat(auto-fit,minmax(150px,1fr))] is a powerful utility class that sets up a grid with responsive and flexible column sizes. Let's break down what this class does:

  • grid-cols-[repeat(auto-fit,minmax(150px,1fr))]:

    • grid-cols: This class sets the number of columns in the grid.

  • repeat(auto-fit,minmax(150px,1fr)): This is a custom configuration for defining the grid columns.

Breaking down repeat(auto-fit,minmax(150px,1fr)):

  • repeat(): This function allows you to specify a repeating pattern for grid columns. In this case, auto-fit is used, which means the browser will automatically determine the number of columns based on the available space.

  • minmax(150px,1fr): This function sets the range of acceptable column sizes. It specifies that the columns can be anywhere from a minimum of 150 pixels to a maximum of one fractional unit (1fr). This means that the columns will take up an equal share of any remaining space after accounting for the fixed minimum size.

In practical terms, grid-cols-[repeat(auto-fit,minmax(150px,1fr))] will result in a grid with columns that are at least 150 pixels wide but can expand to take up any available space. The auto-fit directive allows the grid to dynamically adjust the number of columns based on the container's width.

This class is particularly useful for creating responsive grid layouts where you want a minimum column width of 150 pixels, but allow the columns to expand and contract based on the available space. It provides a versatile solution for adapting grid layouts to different screen sizes and device types.

This Tailwind CSS code creates a flexible grid container that adjusts its columns based on available space. Here's a detailed breakdown:

  • <div class="grid h-full w-full grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4 bg-[white]">:

    • grid: Sets the container to use grid layout.
    • h-full w-full: Makes the container take up the full height and width of its parent element.
    • grid-cols-[repeat(auto-fit,minmax(150px,1fr))]: Specifies the column layout. The columns will be at least 150 pixels wide, but can expand to take up any available space. auto-fit adjusts the number of columns based on the container's width.
    • gap-4: Adds a 4-pixel gap between grid items.
    • bg-[white]: Sets the background color of the container to white.

Inside this container, there are four grid items:

  1. Item 1:

    • grid place-items-center: Centers the content both horizontally and vertically within the grid item.
    • rounded-2xl: Rounds the corners with a high radius.
    • border border-solid border-[color:var(--pink--b)]: Adds a solid border with a color defined by a custom CSS variable (--pink--b).
    • bg-[color:var(--pink)]: Sets the background color with a custom CSS variable (--pink).
    • p-4: Adds padding of 4 units (16 pixels).
    • text-[2rem]: Sets the text size to 2rem.

  2. Item 2, Item 3, and Item 4:

    • These items have similar classes with variations in border color and background color. They follow the same structure as Item 1.

This code results in a responsive grid layout with four items, each with consistent styling but different colors. The grid adjusts the number of columns based on the available space, ensuring an aesthetically pleasing layout on different screen sizes.

Find out more ...

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

Spaced Out

justify-content: space-between

The Tailwind CSS class justify-between is a utility class that applies to flex containers, allowing you to evenly distribute the space between the flex items along the main axis. Here's what it does:

  • justify-between: This class aligns the flex items such that the first item is positioned at the start of the container, the last item is positioned at the end of the container, and any remaining space is distributed equally between the items.

For example, if you have a flex container with three items, justify-between will push the first item to the start, the last item to the end, and evenly distribute the space between them, creating a balanced layout.

This class is particularly useful for creating navigation bars, footers, or any layout where you want to maximize space between elements while maintaining alignment.

Here's an example usage:

<div class="flex justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

In this example, the items will be spread out as much as possible, with Item 1 at the start, Item 3 at the end, and the remaining space evenly distributed between them.

This HTML code uses Tailwind CSS classes to create a grid of three cards with specific styling:

  • Grid Container (<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 it's above other elements.
    • grid: Applies a grid layout.
    • h-auto: Sets the height to auto, allowing it to adjust based on content.
    • w-full: Takes up the full width of the container it's in.
    • grid-cols-[repeat(3,1fr)]: Sets up a grid with three equally sized columns.
    • gap-4: Adds a 4-pixel gap between grid items.
    • bg-white: Sets the background color of the container to white.

Within the grid container, there are three card elements:

  1. Card 1:

    • flex flex-col justify-between: Arranges the content in a column layout with space between the elements.
    • space-y-5: Sets the vertical space between elements to 1.25rem (5 units in Tailwind CSS).
    • border border-solid border-[color:var(--yellow--b)]: Adds a solid border with a custom CSS variable for color.
    • bg-[color:var(--yellow)]: Sets the background color with a custom CSS variable for color.
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).
    • Contains a title (<h3>) and a contenteditable paragraph (<p contenteditable>), as well as a colored div.

  2. Card 2:

    • Similar to Card 1 but with a different title and longer description.

  3. Card 3:

    • Similar to Card 1 but with a different title and a shorter description.

Each card follows a similar structure, but with different content. The color schemes for borders and backgrounds are based on custom CSS variables, allowing for easy customization.

This code creates a responsive grid of cards, each with distinct content and styling. The use of Tailwind CSS classes streamlines the styling process and allows for quick adjustments.

Find out more ...

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

Not Your Grandmothers Clamp

clamp(<min>, <actual>, <max>)

The Tailwind CSS class w-[clamp(23ch,50%,46ch)] applies a responsive width constraint to an element. Let's break down what this class does:

  • w-[clamp(23ch,50%,46ch)]:
    • w-: This class prefix in Tailwind CSS is used to set the width of an element.
    • [clamp(23ch,50%,46ch)]: This is a CSS function, clamp(), that specifies a range of acceptable values for the width.

Breaking down clamp(23ch,50%,46ch):

  • clamp(): This CSS function takes three parameters: a minimum value, a preferred value, and a maximum value. It returns the preferred value if it's within the range of the minimum and maximum values. Otherwise, it will use the closest limit within the range.

  • 23ch: This is the minimum width specified in characters. It sets a lower limit on how narrow the element can be.

  • 50%: This is the preferred value, indicating that the element will ideally take up half of its parent container's width.

  • 46ch: This is the maximum width specified in characters. It sets an upper limit on how wide the element can be.

In practical terms, w-[clamp(23ch,50%,46ch)] creates a responsive width that will ideally be 50% of its parent container's width. However, it will not shrink below the equivalent of 23 characters or exceed the equivalent of 46 characters in width.

This is useful for creating layouts that adapt to different screen sizes while ensuring a readable and aesthetically pleasing line length for text content. The clamp() function provides a powerful tool for setting flexible width constraints in CSS.

This HTML code employs Tailwind CSS classes to create a centered grid container with a specific layout and styling. Here's a detailed breakdown:

  • Grid Container (<div class="grid h-full w-full place-items-center bg-[white]">):

    • grid: Establishes a grid layout for its children.
    • h-full w-full: Makes the container occupy the entire height and width of its parent element.
    • place-items-center: Centers its children both horizontally and vertically within the container.
    • bg-[white]: Sets the background color of the container to white.

  • Card 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: Makes the element a flex container.
    • w-[clamp(23ch,50%,46ch)]: Sets a responsive width constraint. It ideally takes up 50% of its parent container's width but won't go below 23 characters or exceed 46 characters in width.
    • flex-col: Arranges the child elements in a column layout.
    • space-y-6: Sets the vertical spacing between child elements to 1.5rem (6 units in Tailwind CSS).
    • border border-solid border-[color:var(--purple--b)]: Adds a solid border with a color defined by a custom CSS variable (--purple--b).
    • bg-[color:var(--purple)]: Sets the background color with a custom CSS variable (--purple).
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).

Inside this card, there are three elements:

  1. Title (<h1 class="text-2xl font-bold">Title Here</h1>):

    • text-2xl: Sets the text size to 2xl (or 1.5rem).
    • font-bold: Applies a bold font weight.

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

    • h-[125px]: Sets the height to 125 pixels.
    • w-full: Takes up the full width of its parent element.
    • border border-solid border-[color:var(--yellow--b)]: Adds a solid border with a color defined by a custom CSS variable (--yellow--b).
    • bg-[color:var(--yellow)]: Sets the background color with a custom CSS variable (--yellow).

  3. Paragraph (<p>Descriptive Text...</p>):

    • Contains a lorem ipsum text for description.

This code creates a visually appealing card element with a centered layout, controlled width, specific colors, and defined spacing. The use of Tailwind CSS classes simplifies the styling process and enables quick adjustments.

Find out more ...

10. Nothing But Aspectaspect-ratio: <width> / <height>

Plays Nice With

Video Title

Descriptive text for aspect ratio card demo.

Drag Me! 

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

  .ex10 .visual {
    aspect-ratio: 16 / 9;
  }

  .ex10 .card {
    width: 75%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
Explore Original Code Sample on CodePen

The Perfect Ratio Everytime

aspect-ratio: <width> / <height>

This HTML code utilizes Tailwind CSS classes to create a centered grid container with a video card layout and specific styling:

  • Grid Container (<div class="grid h-full w-full place-items-center bg-[white]">):

    • grid: Applies a grid layout.
    • h-full w-full: Makes the container take up the entire height and width of its parent element.
    • place-items-center: Centers its children both horizontally and vertically.
    • bg-[white]: Sets the background color of the container to white.

  • Video Card Element (<div class="flex w-8/12 flex-col space-y-6 border border-solid border-[color:var(--blue--b)] bg-[color:var(--blue)] p-4">):

    • flex: Makes the element a flex container.
    • w-8/12: Sets the width to 8/12 or 2/3 of its parent container's width.
    • flex-col: Arranges the child elements in a column layout.
    • space-y-6: Sets the vertical spacing between child elements to 1.5rem (6 units in Tailwind CSS).
    • border border-solid border-[color:var(--blue--b)]: Adds a solid border with a color defined by a custom CSS variable (--blue--b).
    • bg-[color:var(--blue)]: Sets the background color with a custom CSS variable (--blue).
    • p-4: Adds padding of 1rem (4 units in Tailwind CSS).

Inside this card, there are three elements:

  1. Title (<h1 class="text-2xl font-bold">Video Title</h1>):

    • text-2xl: Sets the text size to 2xl (or 1.5rem).
    • font-bold: Applies a bold font weight.

  2. Video Container (<div class="border border-solid bg-black">...</div>):

    • border border-solid bg-black: Creates a container for the video with a black background.

    Inside this container, there's an embedded YouTube video using an <iframe> and aspect-video class which controls the aspect ratio of the video. The aspect-video class ensures that the video maintains a responsive 16:9 aspect ratio.

  3. Description (<p>Descriptive text...</p>):

    • Contains a descriptive text.

This code creates a visually appealing video card with a centered layout, controlled width, specific colors, and defined spacing.

Find out more ...