Grid Questions
1. Is there any type of design philosophy behind the 12 column layout for Grid? Is this still something that is best practice or recommended for certain situations?
2. What are the usecases for the various measurements with grid. For example for Grid-template-columns when should I be using %, px, Rem/EM?
1 Reply
1) I'm assuming you're referring to Bootstrap. The number 12 was chosen because it has the most amount of multiples compared with any other number around it. It's not strictly necessary, and it might not even fit your layout if the design is incompatible.
2) With
grid-template-columns, you should ideally use fr or %. If you want a specified number of equal-width columns, you can also use repeat(n, 1fr), where n is the number of columns and 1fr is their equal width.
On a side note, fr and % are somewhat relatable units as they both work as fractions of a whole number. For example, for a 60/40 layout, you can do 60% 40% or 3fr 2fr.
Also, if you're going to use grid-gap, you will want to use fr to deal with the overflow.