Learning how Cutestrap implements grids
Cutestrap was developed roughly between 2016 and 2019. The original developer, Tyler Childs, stated that he primarily developed the framework for himself before making it open source. Somehow, it got traction on Hacker News, and people seemed to love it. With 2.7 kb minified and gzipped, it is smaller than Pure.css and offers even fewer features. However, it is one of the few frameworks to implement a grid system using CSS Grid.
We can see the landing page of the Cutestrap website in the following screenshot:
Figure 8.15 – The Cutestrap landing page
The grid system works with three CSS classes and a single custom property, which can be set with inline styles on the grid container. To define a grid, we use the grid class. It automatically applies grid-template-columns: repeat(var(--columns), minmax(0, 1fr));, the --columns custom property defaults to auto-fit, meaning that all elements are spaced out equally...