Grid

Owned by Diana Castillo Arroyo
Last updated: Oct 05, 2023
4 min read

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.