How to display vertical items in the card view in Flutter

You need to set an appropriate childAspectRatio in the GridView like this.

GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 2/3,     //<-- width/height ratio depending on the child's content. Set accordingly.
        //...
)

Edit:

The above part will solve the overflow problem. In addition to that, you can make the size of the Image widget adaptive like this so it can take up more space when available.

Image.network(
                "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
                width: MediaQuery.of(context).size.width / 2.8,
                height: MediaQuery.of(context).size.width / 2.8,
                fit: BoxFit.fill,
              )

You can also set the Column's mainAxisAlignment to spaceEvenly so its children can take up the space evenly when more space is available vertically.

Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      //...
)

I can't see the ScreenShot, but from the code I suggest you wrap The Second Column with Expanded and then the first column wrap it with SingleChildScrollView, that way it won't overflowed and you can scroll through if the contain inside were higher

I guess you have a fixed size for your Grid item. So it will overflow if the height of the Grid is not enough.

I have two ideas for you:

1. Use auto_size_text https://pub.dev/packages/auto_size_text

Expanded(
  child: AutoSizeText(
   'The text to display',
    style: TextStyle(fontSize: 20),
    maxLines: 2,
    minFontSize: 1,
  ),
)

2. Increase the height of your Grid.

Would it work? Have you given it some fixed height in its parents? If given remove that, and then try this.

Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
    FlutterMoneyFormatter(amount: items[index].price);

return Container(
  child: Card(
    elevation: 5.0,
    margin: EdgeInsets.all(8.0),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: Image.network(
              "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
              width: 100,
              height: 100,
              fit: BoxFit.fill),
        ),
        Column(
          children: [
            Container(
              child: Text(items[index].title,
                  style: titleTextStyle,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis),
              margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                  margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                  child: Text(items[index].subtitle,
                      style: subtitleTextStyle)),
            ),
            Container(
              margin: EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(formatter.output.symbolOnLeft,
                      style: priceTextStyle),
                  Text("ADD TO CART", style: addToCardTextStyle)
                ],
              ),
            )
          ],
        ),
      ],
    ),
  ),
);

Try wrapping the overflowing widget with a Flexible widget. The child of the Flexible widget will fill the available space in the main axis.