Зміст курсу
Tailwind CSS: Styling for Modern Web Development
Tailwind CSS: Styling for Modern Web Development
Grid Utilities
Another way of organizing website content is through grids. Tailwind CSS offers powerful utilities for creating grid layouts. This chapter will explain how to use Tailwind CSS grid utilities to establish grid containers and items.
Grid Container
To define a grid container, use the grid
class. You can control the number of columns, the gaps between rows and columns, and more.
index
index
index
Explanation
grid
: Sets the display of the element to grid;grid-cols-3
: Defines a grid with three columns;gap-4
: Adds a gap of 1rem (16px) between grid items.
Grid with Rows
index
index
index
grid-rows-2
: Defines a grid with two rows.
Controlling Column and Row Sizes
You can control the sizes of columns and rows using grid-cols-{n}
and grid-rows-{n}
classes, where {n}
represents the number of columns or rows. You can also use fractional units (fr
), percentages, and other sizing units.
index
index
index
Explanation
col-span-2
: Spans the element across two columns;col-span-3
: Spans the element across all three columns.
Fixed and Flexible Sizes
index
index
index
Explanation
w-1/2
: Sets the width of the element to 50% of its container;w-full
: Sets the width of the element to 100% of its container;w-1/3
: Sets the width of the element to 33.33% of its container.
Grid Template Columns and Rows
You can use specific utility classes to define the number and width of columns and rows in your grid layout.
Custom Grid Columns
index
index
index
Explanation
grid-cols-4
: Defines a grid with four columns;col-span-1
: Spans the element across one column;col-span-2
: Spans the element across two columns.
Custom Grid Rows
index
index
index
Explanation
grid-rows-3
: Defines a grid with three rows;row-span-2
: Spans the element across two rows;row-span-1
: Spans the element across one row.
Note
Please refer to the official documentation for more information about the Tailwind CSS Grid.
Дякуємо за ваш відгук!