Every so often, monitor resolutions increase. In tandem, new grid systems are created to support upcoming resolutions. During the era of 1024x960 monitors, we used the 960 grid system for its flexibility. During the era of 1366x768 laptop monitors, we used the 1200 grid system for its flexibility. Now with 4k monitors, what will be the size of the next flexible grid system?
It turns out that we can solve for the size of the most flexible grid system. In this post, we define the flexibility of a grid system precisely and devise a procedure for finding the most flexible grid system. Finally, we observe some shocking consequences of this analysis.
CSS Grid System Flexibility
Grid systems are characterized by the width of the page layouts they produce. For the 960 grid system, the page content must fit within 960px. We are interested in why the creator, Nathan Smith, chose this number. An excerpt from the 960.gs page will help us develop some insight.
All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
We observe two conditions for the optimal choice of size:
- 960 is close to the width of the target monitor resolution (1024)
- 960 has many factors, 28, which implies flexibility
These conditions are not uncommon. The 1200 grid system makes similar claims. An excerpt from the 1200px.com page tells us why they chose this number.
1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.
The conditions for an optimal choice of grid system size may appear to be heuristic; however, this precise definition allows us to directly compute good values.
Computing the Flexibility through Factorization
The second condition for flexibility is based on the number of factors of the candidate number. So we begin by constructing an algorithm to count the number of factors of any given number. We begin with an example.
Consider the number 24. We want to know the number of factors for this number. Recall that a number $x$ is a factor if $x$ divides 24 with no remainder. As a mathematical expression:
The modulo operation can be expressed in most programming languages a boolean expression of the form
24 % x == 0.
The factors of 24 are 1, 2, 3, 4, 6, 8, 12, and 24. There are 8 factors total. Note that we may represent these factors as pairs.
A simple algorithm for computing the factors for 24 involves counting how many numbers $x$ from 1 to 24 divides 24. However, a faster algorithm would be to only count how many numbers from 1 to the square root of 24 divides 24 and double the count. The latter algorithm is reflective of our intuition for respresenting factors as pairs. We provide an implementation for this algorithm below in Julia.
functioncount_factors(n)count=0forxin1:floor(sqrt(n))ifn%x==0count+=1endendcount*2endprint(count_factors(24))# prints 8Finding the Most Flexible Grid System
Now that we know how to compute the number of factors, we solve for the optimal grid system size by finding the number less than 3840 (the width of a 4K resolution monitor) with the most factors. Again, we use Julia to solve for this number.
julia>sort([(count_factors(n),n)fornin1:3840])3840-elementArray{Tuple{Int64,Int64},1}:(2,1)(2,2)(2,3)(2,5)(2,7)⋮(42,2880)(46,3600)(48,2520)(48,3360)(48,3780)In our analysis, it appears that we have three candidates for grid systems on 4K monitors: 2520, 3360, and 3780. However, recall that the first condition of an optimal grid system size is that it should be close to target resolution width. Hence, we have a rule for choosing the best of the candidates.
And the winner is: 3780.
Consequences of this Analysis
There are a few interesting points under these conditions of a flexible grid system.
The 960 Grid System is not Optimal
It is noteworthy that the 960 grid system acutally does not maximize either of these two criteria under this analysis!
julia>sort([(count_factors(n),n)fornin1:1024])1024-elementArray{Tuple{Int64,Int64},1}:(2,1)(2,2)(2,3)(2,5)(2,7)⋮(28,900)(28,960)(30,720)(30,1008)(32,840)There were three candidates that had more factors. Specifically, the 1008 number was both closer to the target resolution width and had more factors. It also turns out that the 1200 grid system is not optimal.
True Flexibility
Flexibility in terms of number of factors may appear to be arbitrary. However, this turns out to be a good surrogate for true flexibility. We define true flexibility to be the number of combitions of column width $c$, gutter width $g$, and number of columns $n$ possible for a given width $w$. Mathematically, we may express this as solving for the number of solutions to the Diophantine equation
where $c, g, n, w > 0$. This problem, however, is difficult to solve.