Gridview.Builder // crossAxisSpacing doesn't work as expected

Question

tldr; gridview is spaced out. confused myself trying to make it tight. need help.

The problem: I'm using GridView.builder to display some thumbnails. The problem is that they are being spaced out evenly and the crossAxisSpacing isn't working to get them closer together either. By now, I'm totally lost fiddling with options and randomly adding Flexible, Wrap and whatnot widgets. I need help thinking this through. I'll give y'all the code first, then a screenshot. Any help very much appreciated!

The code for the builder:

    class LookbackGridView extends StatelessWidget {
  const LookbackGridView({Key? key}) : super(key: key);

//simplified; deleted setup for variables like gridWith etc.

  return Flexible(
    child: SizedBox(
      width: gridWidth,
      height: gridheight,
      child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisSpacing: gridheight * 0.015,
            crossAxisSpacing: gridWidth * 0.0,
          ),
          padding: EdgeInsets.symmetric(
            horizontal: 0,
          ),
          physics: const BouncingScrollPhysics(
              parent: AlwaysScrollableScrollPhysics()),
          itemCount:
              Provider.of<MainElementList>(context).mainElementList.length -
                  1,
          shrinkWrap: true,
          //
          itemBuilder: (context, index) {
            return index == 0
                ? SizedBox()
                : HistoryThumb(
                    index: index,
                    usedFrom: 'lookbackScreen',
                  );

The code for what is being built:

class HistoryThumb extends StatelessWidget {
  late int index;
  late String usedFrom;

  HistoryThumb({
    required this.index,
    required this.usedFrom,
    Key? key,
  }) : super(key: key);



@override
  Widget build(BuildContext context) {
    //leaving out some setup

    return Column(
      children: [
        Text(//irrelevant),
    //
    SizedBox(
      height: mainElementSize * 0.003,
    ),
    GestureDetector(
      onTap: () {//irrelevant)

        //
      },
      child: ClipRRect(
        borderRadius: BorderRadius.circular(5),
        child: Container( //!!!this is what gives each element its size
          padding: EdgeInsets.all(0),
          height: historyThumbSize,
          width: historyThumbSize,
          //
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  HistoryThumbTask(//irrelevant),
                  HistoryThumbTask(//irrelevant),
                ],
              ),
              //
              HistoryThumbTask(//irrelevant),
              //
            ],

Screenshot: