Grids with GridView

When to use a grid

Product catalogues, photo galleries, category tiles and app launchers show items in rows and columns. A grid uses screen width better than a list for visual items like product photos, and users can compare several at once.

A grid has the same two axes as a list. The main axis is the scrolling direction (vertical by default), and the cross axis is across it. "Cross axis count" therefore means the number of columns in a normal vertical grid. mainAxisSpacing is the gap between rows; crossAxisSpacing is the gap between columns.

Like ListView, GridView scrolls by itself. Do not put it directly inside a Column without Expanded, and do not nest it inside another vertical scroll view; make it the main scrolling area of the screen, or use slivers (CustomScrollView with SliverGrid) when one screen needs a header, a grid and a list scrolling together.

GridView.count for small grids

GridView.count(
  crossAxisCount: 3,                 // 3 columns
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  padding: const EdgeInsets.all(8),
  children: const [
    Card(child: Center(child: Text('Mobiles'))),
    Card(child: Center(child: Text('Fashion'))),
    Card(child: Center(child: Text('Grocery'))),
    Card(child: Center(child: Text('Home'))),
  ],
)

GridView.builder for long grids

GridView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: products.length,
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200,         // tiles at most 200 wide: 2 columns on phones, more on tablets
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    childAspectRatio: 3 / 4,         // width : height
  ),
  itemBuilder: (context, i) => ProductTile(product: products[i]),
)

childAspectRatio

childAspectRatio is width divided by height of each tile. 1 makes squares; 3 / 4 makes tiles taller than wide, which suits a product image with a name and price below. If content overflows inside a tile, the tile is too short: lower the ratio (taller tiles) or reduce the content.

For tiles of different heights, like a Pinterest-style photo wall, look at community packages for masonry or staggered grids.

A product tile

class ProductTile extends StatelessWidget {
  const ProductTile({super.key, required this.name, required this.price, required this.imageUrl});
  final String name;
  final int price;
  final String imageUrl;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(child: Image.network(imageUrl, fit: BoxFit.cover, width: double.infinity)),
          Padding(
            padding: const EdgeInsets.all(8),
            child: Text(name, maxLines: 1, overflow: TextOverflow.ellipsis),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
            child: Text('Rs $price', style: Theme.of(context).textTheme.titleMedium),
          ),
        ],
      ),
    );
  }
}

Common mistakes

• Fixed 2 columns on tablets: tiles become huge. Use MaxCrossAxisExtent for responsive grids.
• Overflow inside tiles because the aspect ratio is too wide. Make tiles taller or content smaller.
• Using GridView.count for hundreds of items. Use GridView.builder.
• Large network images without caching or resizing: slow scrolling (see module 9).