Modern CSS layouts enable developers to write really meaningful and robust styling rules with just a few keystrokes. The talk above and this subsequent post examine 10 powerful lines of CSS that do some serious heavy lifting.
To follow along or play with these demos on your own, check out the Glitch embed above, or visit 1linelayouts.glitch.me.
place-items: center #For the first 'single-line' layout, let's solve the biggest mystery in all of the CSS land: centering things. I want you to know that it's easier than you think with place-items: center.
First specify grid as the display method, and then write place-items: center on the same element. place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.
This enables the content to be perfectly centered within the parent, regardless of intrinsic size.
flex: <grow> <shrink> <baseWidth> #02-deconstructed-pancake-1.mp4
Next we have the deconstructed pancake! This is a common layout for marketing sites, for example, which may have a row of 3 items, usually with an image, title, and then some text, describing some features of a product. On mobile, we'll want those to stack nicely, and expand as we increase the screen size.
By using Flexbox for this effect, you won't need media queries to adjust the placement of these elements when the screen resizes.
The flex shorthand stands for: flex: <flex-grow> <flex-shrink> <flex-basis>.
Because of this, if you want your boxes to fill out to their <flex-basis> size, shrink on smaller sizes, but not stretch to fill any additional space, write: flex: 0 1 <flex-basis>. In this case, your <flex-basis> is 150px so it looks like:
If you do want the boxes to stretch and fill the space as they wrap to the next line, set the <flex-grow> to 1, so it would look like:
02-deconstructed-pancake-2.mp4
Now, as you increase or decrease the screen size, these flex items both shrink and grow.
grid-template-columns: minmax(<min>, <max>) …) #This demo takes advantage of the minmax function for grid layouts. What we're doing here is setting the minimum sidebar size to be 150px, but on larger screens, letting that stretch out to 25%. The sidebar will always take up 25% of its parent's horizontal space until that 25% becomes smaller than 150px.