CSS Notepad

Just another page of notes for my own use. If you are doing front-end design, these may be helpful.

Maybe it is the browser defaults



Oh thank god for border-box

box-sizing: border-box



When will everyone support CSS Grid?


CSS Grid purports to solve all our problems, my highlight:

::To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Similarly to flexbox, the source order of the grid items doesn’t matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.::

A Complete Guide to Grid