📄️ Vertical layout
The default layout for the Grid is the Vertical layout, which consists of a fixed number of columns and a vertically scrollable grid container. The number of columns is calculated automatically based on the specified gap settings and the width of the grid container. The following image displays the Vertical layout of the grid and the scrolling direction.
📄️ Horizontal Layout
In a horizontal layout, there will be a fixed number of rows, and the number of columns will be decided based on the number of items in the list. The number of rows will be calculated based on the width of the list and the width of the item. The width of the item is calculated based on the height of the container and the gap settings.
The Masonry layout is a useful technique that enables you to create a grid of images with varying widths and heights. Masonry comes with two fill-mode options to change the way the images are displayed.