You are here:

Notice

Please keep in mind that these examples are fully customizable by you. Since this is a developer template you need to adjust colors, borders, widths and distances by yourself.

There is a huge variety of possibilities to combine or nest YAML Grids. We can only show you some of them here. Try it yourself.

Box with round edges nested in Grid 50-50

Change the color by editing content.css

Color 1 is blue by default, but you can change this by editing content.css – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Change the color by editing content.css

Color 2 is green by default, but you can change this by editing content.css – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Boxes with round edges nested in Grid 33-33-33

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Boxes with round edges nested in Grid adjustable 3 columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Boxes with round edges nested in Grid adjustable 2 columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl elit, ullamcorper accumsan enim. Duis quis dolor in dui consectetur tristique. Vestibulum vulputate sapien in eros malesuada aliquam.