CSSGrid with TailwindCSS utility classes

FlexBox system: please note that I call the flex line as flex virtual container.

Terminology:

  • Horizontal direction in CSSGrid means: inline (row) axis
  • Vertical direction in CSSgrid means: block (column) axis
Tailwind Class CSS declaration Edit
grid display: grid; Example

Explanation: grid sets the display property of an element to grid and it makes a grid container.

Tailwind Class CSS declaration Edit
justify-items-start justify-items: start; Example
justify-items-end justify-items: end; Example
justify-items-center justify-items: center; Example
justify-items-stretch justify-items: stretch; Example

Explanation: The grid items in a way are positioned along the horizontal direction within each grid cell.

Tailwind Class CSS declaration Edit
items-start align-items: start; Example
items-end align-items: end; Example
items-center align-items: center; Example
items-baseline align-items: baseline; Example
items-stretch align-items: stretch; Example

Explanation: The grid items in a way are positioned along the vertical direction within each grid cell.

Tailwind Class CSS declaration Edit
justify-start justify-content: start; Example
justify-end justify-content: end; Example
justify-center justify-content: center; Example
justify-stretch justify-content: stretch; Example
justify-between justify-content: space-between; Example
justify-around justify-content: space-around; Example
justify-evenly justify-content: space-evenly; Example

Explanation: The grid tracks in a way are positioned along the horizontal direction within the grid container.

Tailwind Class CSS declaration Edit
content-normal align-content: normal; Example
content-start align-content: start; Example
content-end align-content: end; Example
content-center align-content: center; Example
content-stretch align-content: stretch; Example
content-between align-content: space-between; Example
content-around align-content: space-around; Example
content-evenly align-content: space-evenly; Example

Explanation: The grid tracks in a way are positioned along the vertical direction within the grid container.

The align-content: normal; value is actually the default value of the align-content property in the CSS Box Alignment specification, but it behaves differently depending on the layout model. For Flexbox, this value is treated as stretch, which means the flex lines will stretch to take up any remaining space in the flex container along the cross-axis.

align and justify grid items at the same time within the grid cells

Tailwind Class CSS declaration Edit
place-items-start place-items: start; Example
place-items-end place-items: end; Example
place-items-center place-items: center; Example
place-items-baseline place-items: baseline; Example
place-items-stretch place-items: stretch; Example

Explanation: The grid items in the same way are positioned along the vertical and horizontal direction within the grid cell.

align and justify grid tracks at the same time within the grid container

Tailwind Class CSS declaration Edit
place-content-start place-content: start; Example
place-content-end place-content: end; Example
place-content-center place-content: center; Example
place-content-stretch place-content: stretch; Example
place-content-between place-content: space-between; Example
place-content-around place-content: space-around; Example
place-content-evenly place-content: space-evenly; Example
place-content-baseline place-content: baseline; Example

Explanation: The grid tracks in the same way are positioned along the vertical and horizontal direction within the grid container.