Example Flutter Web app with a responsive GridView

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(context) =>
    MaterialApp(
      home: MyHomePage()
    );
}

class MyHomePage extends StatelessWidget {
  final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];
    
  
  @override
  Widget build(context) =>
    Scaffold(
      body: GridView.extent(
        maxCrossAxisExtent: 130.0,
        crossAxisSpacing: 20.0,
        mainAxisSpacing: 20.0,
        children: elements.map((el) => Card(child: Center(child: Padding(padding: EdgeInsets.all(8.0), child: Text(el))))).toList()
      )
   );
}

This snippet was a "life saver" ... looked for hours to "get into" GridView stuff, can't find a good solution like this one.
Thank you!

@Aerofluxx this is part of this article.

In this case a smarter solution would probably be to use GridView.builder, as I wrote in that article.

I appreciate you found this snippet helpful nonetheless.

This snippet was a "life saver" ... looked for hours to "get into" GridView stuff, can't find a good solution like this one.
Thank you!

@Aerofluxx this is part of this article.

In this case a smarter solution would probably be to use GridView.builder, as I wrote in that article.

I appreciate you found this snippet helpful nonetheless.

Thank you so much for responding to this!

Indeed this article helps a lot of understanding the GridView.builder. There is not much to find about anywhere else. I'm wondering why I couldn't find this great article with searching around.