Here’s what I learned at Rustbelt Refresh 2019: “Next Steps with CSS Layout” with Rachel Andrew~!
- Rachel Andrews’ workshop pens masterlist ⭐️
- MDN: CSS Grid Layout Guides and Properties
- CSS Tricks: A Complete Guide to Grid
- Codrops: CSS Reference: Concept: CSS Grid
- CSSdb, What’s next for CSS?
Clearfix begone!!! 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
From the draft spec: The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
Removes the excessive default styling (i.e. removes the box of the element — literally “box generation”) but keeps the accessible context of the element. Great for forms, for example!
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as
::beforeand::afterpseudo-elements, which are generated before/after the element’s children as normal).
Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
Makes an element actually span across columns in a multicol layout 😱 You don’t have to move it out of the element with column styling! 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
Avoid an element within a multi-column layout to keep the property from breaking apart (“wrapping” to an additional column when using card styling). 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
Indicate that content should be kept together. Avoid a break before/after the principal box (block-level element).
✏️ Codepen using all of the above declarations in a multicolumn layout
Some flex-y properties aren’t just for Flexbox like I thought they were! Flexbox styling is great for fiddling and fine-tuning layout elements, but isn’t the best option to layout content in a grid system (guess what is… Grid!!!).
When we’re justifying content on the inline ("main") axis, we use justify-content! (No need for the old flex- prefix in the value, e.g. justify-content: start will do!)
Use this when you need to align elements on the block ("cross") axis, use align-content or align-items! Just like justify-content 👆 but on the opposite axis. Use the align-self property to override this for one child element.
/*
Longhand for below:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
*/
flex: 1 1 0;flex-grow: 1 means that all items can grow to fill the leftover space, much like the fr Grid unit.
If you want to have equal-space items within a flexbox container (so the flex children widths have nothing to do with the content in them), set flex-basis to 0 (a.k.a. distribute the leftover space to ALL of the space).
When you use only one #{value} for flex, it defaults to:
flex-grow: #{value};
flex-shrink: 0;
flex-basis: 0;Instantly change your layout to read right-left on a 90º tilt! But… if you use width/height and top/right/bottom/left then it’s pointless so you hafta use logical properties (below!)
Logical replacements for width and height: inline-size and block-size. They define the horizontal or vertical size of an element's block, depending on the value of writing-mode.
📒 MDN: inline-size
· MDN: inline-block
Use logical properties block-start, block-end, inline-start, inline-end instead of physical properties top, right, bottom, left to avoid mapping values directly to visual "sides" as opposed to the bounds of the content.
✏️ Codepen replacing width, border, margin, padding with logical properties
Elements are only reordered visually with Grid (like with Flexbox); the document source (what text-to-speech and tab order read from) remains untouched. As always, start with a structured and accessible document. 📒 MDN
Because Grid is so powerful, you have to keep the source order in mind as you design. If reordering content makes sense logically as well as visually, then the source should be changed instead of just relying on Grid layout.
Defining the writing-mode and using logical alignment (as opposed to traditional, physical alignment) allows content to be structured properly in right-to-left and vertical languages (without defaulting to English and creating a secondary stylesheet for other scenarios).
Not covering the basic concepts and their properties here, just some neat specifics in the following sections! So use the resources provided in 📓 Reference and the readings/examples in the immediate links below to learn your way around Grid. Remember when we first learned Flexbox? It’s like that but less-intutive-to-how-we’re-USED-to-CSSing and with a zillion more possble declarations 😭
- 📒 MDN: Basic concepts of Grid layout
- 📒 MDN: Common layouts
- 📒 Grid By Example: full layouts + common patterns
▶️ Layout Land video playlist- ✏️ Codepen: Collection of 24+ examples by @Stacy
- ✏️ Codepen: Masonry layout pattern + Masonry layout example
- ✏️ Codepen: Put a Grid in your Grid so you can Grid while you Grid
Stands for "fractional unit" — means 1 part of the available space. Use it like flex: 1 2 1 but on one of the grid- properties.
📒 CSS Tricks
· MDN
grid-template-columns: 1fr 2fr 1fr;Used in grid-template-columns/grid-template-rows, shortcut for many columns/row with a recurring pattern.
📒 MDN
· Alligator
grid-template-columns: repeat(auto-fill, 200px);Create Grid tracks that flex to the available space, but that don’t shrink narrower than a specified size. 📒 MDN · Alligator · Bits of Code
grid-auto-rows: minmax(100px) auto;Kinda like column-span or flex-justify, you can fill out the remaining space and define the rest of the column or row. 📒 Alligator
.box:nth-child(1) {
grid-row-end: span 2;
}
.box:nth-child(odd) {
grid-row-end: span 4;
}Using -1 will get the last line defined by the template. Rather than being starting two Grid lines before Grid line 1, the item is placed at the very last Grid line.
grid-column: 2 / -1;
grid-row: 2 / 5;Essentially max-width/max-content, but uses intrinsic width.
Fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.
📒 MDN
Make use of @supports feature queries to serve new styles to new browsers without changing your old code for old browsers. 📒 MDN
/* "Old" CSS */
.grid > div {
float: left;
width: 33%;
}
/* "New" CSS */
@supports(display: grid) {
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid > div {
width: auto;
}
}