> For the complete documentation index, see [llms.txt](https://gdgaddis.gitbook.io/mobile-development-reference-tce-c01/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gdgaddis.gitbook.io/mobile-development-reference-tce-c01/products-feature/implementing-products-screen-ui/adding-products-grid.md).

# Adding Products Grid

Inside the product\_screen.dart file under src/product/view/products/ add the following code:

```dart
class _ProductsGridView extends StatelessWidget {
  final List<Product> products;

  const _ProductsGridView({Key key, @required this.products})
      : assert(products != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        childAspectRatio: 1 / 1.2,
      ),
      padding: const EdgeInsets.all(8),
      itemCount: products.length,
      physics: const BouncingScrollPhysics(),
      itemBuilder: (_, index) => _ProductItem(product: products[index]),
    );
  }
}
```