For the task of displaying a variable number of columns depending upon the screen width, flex is the natural tool to use. However, this requires some structuring of the HTML to work properly. Where that structure was absent, grid code in a container query provided an alternate solution. At a certain breakpoint, the grid code would display things in two columns, and below the breakpoint, it would not go into effect. The flex solution does not require a container query, as it naturally adjusts its display to the available space. While there is a grid solution that can work without a query, it takes some trickery and does not work as well. Since the flex solution does require some extra HTML, I have put it all together in a fork of betzaNew.js called /fergus/betzaFlex.js. This page is using that fork without any additional CSS added to the page.
For the task of displaying a variable number of columns depending upon the screen width, flex is the natural tool to use. However, this requires some structuring of the HTML to work properly. Where that structure was absent, grid code in a container query provided an alternate solution. At a certain breakpoint, the grid code would display things in two columns, and below the breakpoint, it would not go into effect. The flex solution does not require a container query, as it naturally adjusts its display to the available space. While there is a grid solution that can work without a query, it takes some trickery and does not work as well. Since the flex solution does require some extra HTML, I have put it all together in a fork of betzaNew.js called /fergus/betzaFlex.js. This page is using that fork without any additional CSS added to the page.