Grid is a skin type in Dynamic Posts that lets you display posts in a grid layout based on the flex display property.
For your grid, you can enable:
Pagination
Infinite Scroll
Grid
Selecting Grid in the Skin will open up Grid options in the widget as below.
Grid Type: Grid Type can be Flex, Masonry, and Blog.
Grid - Flex
Columns: Choose the maximum number of grid items in one row
Flex Grow: It is a CSS property that specifies how much the item will grow relative to the rest of the items in the container. Default CSS property is 0. However, on Dynamic Posts default is 1 so it grows and covers the rest of the items.
Horizontal Position: With this, you can justify the content.
Vertical Position: With this property, you can align the items to the top, middle, or bottom on the cross-axis. Default is stretch.
Match Height: With this option enabled, you can have the same height for all the grid items. For example, if grid columns are 3, items in grid 4, and flex-grow set to 1, then by default you will have the uneven height for the 4th item which will grow. However, if you enable match height in the case, all the three items will now have the same height as that of the 4th.
Match Height by Row: In the above example, we had the 4th item in the second row whose height was bigger than all items. However, if you don't want to let this happen (not to take the height from other rows for adjustment) then you can enable match height by the row. In this case, the height of grid items contained in a row would be equal and can differ from the height of the other row.
Grid - Masonry
With Masonry Grid type you can choose to show your content in a masonry form with a selected number of columns.
Grid - Blog
In this grid type, you can show a custom template from your first item and the rest are shown in a grid flex form.
