Why does the GridView.builder returns elements expanded in height whereas the ListView.Seperated returns the element with normal height?

Question

I wanted to use the grid view for the landscape mode. So i used GridView but all the Grid elements are expanded vertically.

I even tried for the ListView.builder using GridView.builder setting the crossAxisCount to 1 to make the same effect as the ListView.builder but there also all the items are expanded vertically.

Widget buildTopNews(BuildContext context) {
  return Container(
    padding: EdgeInsets.only(bottom: 20),
    child: MediaQuery.of(context).orientation == Orientation.portrait
        ? ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (BuildContext context, int index) {
              return NewsCard(
                news: topNews[index],
              );
            },
            itemCount: topNews.length,
            separatorBuilder: (BuildContext context, int index) {
              return SizedBox(
                height: 20,
              );
            },
          )
        : GridView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: topNews.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
            ),
            itemBuilder: (BuildContext context, int index) {
              return NewsCard(
                news: topNews[index],
              );
            },
          ),
  );
}

Answer 1

Gridview has an aspect ratio for its children. So that's why your items are having the same height as its width(width is set out first). Change the aspect ratio value in your gridview to get the desired height.