position: relative :: setting an element to have relative positioning essentially allows for setting a position relative to itself, or where it would have been normally. Actually declaring a relative position does not change the items position, but rather allows you (using top, right, etc) to position it relative to where it is by default.
Selection
type1 > type2: selects elements of type2 that are direct children of type1
type1 type2: selects type2’s at any nested level under type1
Grid
Implicit and Explicit Grid
Learned there is a difference between explicit and implicit grids. The explicit grid styles are explicitly set by the user, and those elements that match fall into these settings (e.g. cell sizes). Settings for explicit grids might include things like grid-template-rows and grid-template-columns, where the user is explicitly specifying the sizes of the grid’s rows and columns. But there are times where there are more elements than was specified explicitly, so how do these elements get placed into the grid? This is where the implicit grid comes in. The implicit grid automatically places these elements into some default setting grid, outside of explicit grid (i.e. evenly divided up whatever remaining space is available). This ensures all elements are placed in some expectable manner onto the grid as a whole. But we can control the implicit grid itself as well with settings like grid-auto-rows/columns, applying to all elements that were not explicitly placed with explicit grid settings.
A quick example of this is with the “link tables” on my website. I wanted to set the width of the left-most id column to something relatively thin, and have the other elements in the row split the remaining space. So I set the left column grid-template-columns: 0.2fr to a small value explicitly, and then I set grid-auto-columns: 1fr to split the remaining space amongst the other elements. This did exactly what I wanted. Note that I previously had done this using grid-auto-columns: 0.2fr 1fr 1fr, which had the exact same effect BUT I did not want to have to explicitly specify the number of additional fr units I needed to correspond to row elements (size this could change based on page). So I just set the explicit grid on the left, and let the implicit grid auto place the remaining elements.