Gridbox

1. Grid Setup:

   • Use the following classes to create a grid layout:
     • "grid": Apply this class to the container element to establish a grid context.
     • "grid-auto-column-sm" or "grid-auto-column-md": These classes define the automatic column sizing behavior for small and medium sizes, respectively.

2. Centering the Group:

   • To center the group within the grid, include the "grid-center" class on the container element.

3. Vertical Alignment:

   • By default, each image will align to the top of its grid cell.
   • If you want to align images from the bottom, add the "item-align-bottom" class to the image elements.

4. Lightbox Showroom:

   • Each image has a built-in lightbox showroom feature.
   • When users click on an image, a larger version of the image will open in the lightbox

Remember to set the template on "asset-index".

For larger thumbnail, use  "grid-auto-column-md"

Apply the grid-auto-column-lg class to display a single large image that spans the entire width of the page. The image will overflow the paragraph (because the paragraphs are set with 10% padding on each sides), creating an aesthetically pleasing effect.

If you wish to align the image with the surrounding text, add the px-[10%] utility class. This will introduce 10% padding on both the right and left sides of the image, ensuring it aligns seamlessly with the adjacent content.

Flexbox

Flex arrangement is made easy with the flex utility class. Simply apply the flex class to your container, and it will turn into a flexbox, instructing the browser to arrange the items in a row with the same height but varying widths.

If you want to ensure that the maximum height of images remains below 450 pixels, you can use the flex-md class.

For centering purposes, utilize the flex-center class.

Long captions can be tricky!

Entering Asset Classes

The `Asset block` can become complex when entering classes because it consists of three distinct class entry boxes that apply to the root container, the parent container, and the children assets. These class entry boxes are hierarchically related, and understanding their relationships is crucial for effectively using Utility Classes.

To optimize the use of Utility Classes within the "Asset block," users must carefully consider the intended target for each class they enter. The root parent class entry box applies styles to the entire block, while the sub-parent and children class entry boxes allow for more specific styling of individual elements within the block.

By grasping the hierarchical nature of these class entry boxes and strategically applying Utility Classes to the appropriate level, users can achieve precise control over the appearance and functionality of the "Asset block." Proper utilization of these classes streamlines the development process and ensures a consistent, efficient, and maintainable codebase.

To set the height of images to a specific percentage of the viewport height, you can use the Utility Classes h-30svh and h-40svh. For example, applying the class h-30svh to an image will fix its height to 30% of the small viewport height (svh), while using h-40svh will set the image height to 40% of the svh.