The CSS3 course got to frameworks this month, which in practice means Bootstrap. Version 3.3.7, added the way the class adds everything: one CDN link pasted into the head, plus a jQuery script tag underneath it, which the interactive components need and I don't understand yet. After months of writing every rule by hand, one line of HTML now hands me styled buttons, a navbar, and a layout system. The layout system is the part worth writing about.
The grid is three nested pieces. A container centers your content and caps its width. Inside that goes a row, and inside the row go columns, and every row is twelve units wide. A col-md-6 spans six of the twelve, so two of them sit side by side. Three col-md-4s split the row in thirds. The md is a breakpoint, meaning that width applies on medium screens and up, and you can stack the classes (col-xs-12 col-md-6) so the same div runs full-width on a phone and half-width on a laptop without the markup changing at all.
Under the hood it's nothing exotic. The columns are floated left, the same way I floated divs in November, with the widths worked out as percentages of twelve and the clearfix handled by the row so I never have to think about it. I checked in the inspector to be sure. There's a Bootstrap 4 in alpha that's said to rebuild all of this on flexbox, but three is current and three is what the class teaches. The framework does the arithmetic and the cleanup I would otherwise redo on every page, and months of clearing my own divs is the only reason I can see exactly what it's saving me.
The reason the grid clicked fast is that I already think in this shape. I spend my day job in spreadsheets, and a spreadsheet is rows of cells you merge into wider cells when something needs the room. Six and six. Four, four, four. Three across with a cell left empty for breathing space, which Bootstrap calls an offset. Laying out a page in the grid is deciding how many of twelve units each thing deserves, and I make that decision at work every week, just with column letters instead of class names. Even nesting maps: a row inside a column is a merged cell with its own little table in it.
Twelve is a good choice for the same reason it shows up in egg cartons and clock faces. It divides cleanly by two, three, four, and six, where ten only gives you halves and fifths. Whoever settled on twelve was optimizing for the layouts people actually build.
— Lo