In this tutorial you will use Grid to display a collection of products, similar to that of an e-commerce website, and use its properties to:

• Present a collection of items in a grid.
• Allow the number of grid columns to adapt to a variety of screen widths.
• Allow the items to adapt and flex within the available space.

At the end of this tutorial, you will have built this:

This tutorial can be completed in its entirety by following the steps below. However, because Grommet is a ReactJS-based UI library, introductory knowledge of React may be helpful in understanding the syntax.

Let’s get started. Use this CodeSandbox template as a starter.

First, in App.js add the Grid to your project by importing it from Grommet and placing it around the “hello world” text.

Let's also add a heading to the page.

Now that you have the Grid in place, let's add some placeholder content. Replace the "hello world" text with the following:

We now have a Grid with seven boxes, each containing a product name. The Grid is displaying the boxes in a single column, which is the default behavior.

To display the boxes in a grid, we need to add columns. The Grid component has a columns property that allows you to specify the number and/or width of the columns you want to display. Let's add the columns property to the Grid and set it to { count: 3, size: 'auto' }.

Now the boxes are displayed in a grid with three columns.

Now that we have a grid with three columns, let's add some product content to the boxes. Start by adding ProductCard and productList to App.js. ProductCard is a template set up for ease of use and will be used to display the product image, name, and price. productList is a JSON file containing the product data.

Then, replace the placeholder content with the following:

Now the products are displayed in the grid with three columns.

Take a moment to resize the browser window. Adjust the width, both wider and narrower. Notice that the products appear squished when the browser window is narrow and stretched when the browser window is wide. This is because the Grid is not responsive. Let's fix that.

To make the Grid responsive, we will adjust the columns property. Set the columns property to "medium".

Now the Grid will fit as many columns as will fit in the available space, with each column being a minimum width of the t-shirt size 'medium'.

Notice how the number of columns changes as the browser window is resized. The Grid is now responsive.

Now that we have a responsive Grid, let's polish the layout. Let's add some space between the products by adding gap="small" to the Grid.

Finally, let's refine the column width to be a bit more efficient with our screen's real-estate. A minimum column width of "medium" feels too wide. Let's try setting the columns property to "small".

Now we are able to display more products in each row, but they become too narrow. Let's make our final modifications by importing the function midSize from a utilities file, add two additional lines of code which calculate a column width between 'small' and 'medium', and then use that value in the columns property.

Congratulations! You have completed the tutorial and have a great start on a very respectable product catalog.

In this tutorial, you learned how to:

• Use the Grid component to present a collection of items in a grid.
• Use the columns property to specify the number and/or width of the columns.
• Use the columns.count property to specify the number of columns.
• Use the colums.size property to specify the width of the columns.
• Use the columns property to respond to the space available.
• Use the gap property to add space between the items.

If you'd like to reference a completed implementation, check out this CodeSandbox with completed code.