Some time back I wrote an article on the 12 column grid system used by most CSS Frameworks. If it's not clear, I was questioning why 12 columns The number seems arbitrary. I have also seen grids that are fewer columns and some that are more columns.
I have had to revisit this while trying to end using Flexbox. That means using CSS Grid exclusively. The problem ... and not sure it's a problem, maybe it's an issue ... is all the sites and stored boilerplates and components that I have already created. I don't want to rewrite all of those, I would rather leave them intact and create a CSS Grid system that works with that code.
That means using .row to create a non-wrapping row. Columns are the main concern though:
col-1 through col-12, one-third, two-thirds, one-quarter, two-quarters (& one-half), three-quarters, one-fifth, two-fifths, three-fifths, and four-fifths.
And, in the new CSS Grid, I would also like to support: one-sixth, two sixths (or one-third), three-sixths (or one-half), four-sixths (or two-thirds), and five-sixths.
With the CSS "grid-column" code, you need an integer. In doing the math to figure out how to accommodate all of these classes, the lowest number of columns is 60. Quite frankly, I thought 12 was a dumb number. It's clearer now that 12 was the basis number. For example, two-thirds would generate the calculation: 12 / 3 * 2 = 8. An integer as required. Keep in mind this is for Flexbox where you can have inter.decimal based numbers. CSS Grid does not seem to be that flexible with some of its elements.
I also need to point out that most CSS Frameworks based on Flexbox would define one column of a 12 column grid as "8.33333%", two columns as "16.66667%", etc. I wanted a bit more flexibility so I set my grid for one column as "calc(100% / 12 * 1)", two columns as "calc(100% / 12 * 2)", etc. Note these calculations are not creating integers exclusively, they are creating floating numbers. CSS Grid, for grid-columns, is looking for integers.
In doing the match, the only way to support thirds, fourths, fifths, and sixths, is to have your basis as 60.
I created a variable for the basis and set it to 60: "–col-basis: 60;". Here's an example showing how to create "col-two-quarters":
.grid-two-quarters,
.grid-one-half {
grid-column: auto / span calc(var(–col-basis) / 4 * 2);
}
Note that this defines both "grid-two-quarters" and "grid-one-half" since they are both identical.
I also note, ironically, that I will never use 60 columns. The article I refer above, and provide a link, was a tad comical in pointing out that I have never used 12 columns in the previous 12 column grids I used. It's even more comical thinking that I could use 60 columns if I wanted. Each column would be 20 pixels wide in a 1200 pixel display. That is typically close to the gap specified, so I would be displaying one or two characters at the most in each line. Comical thinking about it.
Change the thinking, though. In CSS Blade, 60 is the basis for calculations, not suggesting using 1 of 60 columns. 60 is a superior highly composite number with a total of 12 divisors. It satifies base 2, base 3, base 4, base 5, base 6, base 10, and base 12 calculations. I note that it also satisfies base 15, base 20 and base 30 as well as base 60. The old 12 column grid does not satisfy calculations based on base 5 or base 10.
The CSS Blade grid is based on CSS Grid. The calculation basis is 60. It supports the same classes as previous Flexbox classes (row, col-1 to col-12) without using Flexbox. It supports auto width columns with wrap row without using any "col-" or other class in the column div. Here's an example of the code:
<h5>Auto-fit with 7 columns (max)</h5>
<div class="grid col-auto mt-1">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec pellentesque risus. Integer volutpat malesuada diam sed egestas. Vestibulum tincidunt fringilla nisl, a pellentesque libero feugiat eget. Nulla vulputate molestie fringilla. Praesent iaculis tristique felis, in convallis tortor elementum eu. Nam feugiat turpis vitae libero pellentesque, id ultricies lorem tristique. Suspendisse efficitur risus lacinia lorem dapibus laoreet. Vivamus ut vestibulum nisi, eu scelerisque urna. Nulla facilisi. Phasellus dignissim nunc et massa consequat, eget vehicula metus fringilla. Vestibulum sed ex et ante consectetur faucibus. Nam ante leo, scelerisque congue imperdiet eget, dignissim sit amet metus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec pellentesque risus. Integer volutpat malesuada diam sed egestas. Vestibulum tincidunt fringilla nisl, a pellentesque libero feugiat eget. Nulla vulputate molestie fringilla. Praesent iaculis tristique felis, in convallis tortor elementum eu. Nam feugiat turpis vitae libero pellentesque, id ultricies lorem tristique. Suspendisse efficitur risus lacinia lorem dapibus laoreet. Vivamus ut vestibulum nisi, eu scelerisque urna. Nulla facilisi. Phasellus dignissim nunc et massa consequat, eget vehicula metus fringilla. Vestibulum sed ex et ante consectetur faucibus. Nam ante leo, scelerisque congue imperdiet eget, dignissim sit amet metus.</p>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
and it's fully responsive. At 1350px, I get 7 columns and wraps to a total of 3 rows.
The entire grid.css file is 7Kb raw. Three types of grids, one supporting the familiar 12 column grid layout, one supporting a fixed number of columns in rows (wrapping), and one supporting auto flowing columns, also wrapping.
I'm still doing testing, but am quite pleased with this new CSS Grid.