Grid
- Diana Castillo Arroyo
The Grid Layout is a two-dimensional grid-based layout module formed by rows and columns..
The vertical line of grid items areĀ columns.
The horizontal line of grid items areĀ rows.
To divide a grid you will need to adjust the "Grid Layout" (with yellow border) using Flex Section.
Ā
Gap in CSS Grid is used to define the space between rows (Row Gap) and columns (Column Gap) in a grid.
Note: These properties allow you to set the visual separation between elements in the grid, which makes the layout and readability of the content easier.
Ā
For example:
Flex Box Item
(Flexsection > Grid > Flex Box)
Grid layout properties affect the behavior of elements inside the Flex box.
Ā
Flex Direction: controls the direction in which elements align within a flexible container. It determines whether the elements will be aligned in a row, in a column, or in other arrangements.
Row Direction/Row Reverse:
Ā
Column Direction/Column Reverse:
Justify Content: is used to horizontally align flexible elements within a flexible container. How justify-content affects the elements depends on the direction set by the flex-direction property.
Ā
Flex-start: (default)
Center:
Flex-end:
Space-between:
Space-around:
Space-Evenly:
Ā
Note: The difference between space-around and space-evenly lies in how margins at the ends of the container are handled. space-around places half of the space in the margins, while space-evenly distributes space everywhere, including the ends.
Align Items: controls how elements are vertically aligned within a flexible container. How align-items affects the elements depends on the direction set by the flex-direction property.
Top: (default)
Middle:
Bottom:
Baseline:
Stretch:
Ā
Note: baseline aligns elements based on their text baseline, which can result in variable heights, while stretch stretches elements to have the same height on the cross-axis regardless of their content.
Flex Wrap: controls whether flexible elements inside a flexible container can or cannot wrap onto multiple lines when there is not enough space.
None:
Wrap: (default)
Reverse:
Align Self: is used to control the vertical alignment of a specific flexible element within a flexible container.
Top:
Middle: (default)
Bottom:
Baseline: It aligns according to the baseline of its conten.
Stretch:
Justify Self: It controls the horizontal alignment of a specific flexible element within a flexible container.
Left:
Center:
Right:
Although flexbox and grid share CSS style properties, grid is suitable for a wide variety of scenarios and layouts where the arrangement of elements in rows and columns is essential. Some them include: Image Grid, Blog and Articles, Data Tables, Forms, Control Panels, etc.