10 modern layouts in 1 line of CSS

This video, featuring Una Kravets from Google Chrome Developers, goes over 10 short pieces of CSS that can be used to style page elements rapidly – often controlling layout and responsiveness in significant ways with tiny code blocks. Several make good use of Flexbox or CSS Grid. The official description says:

In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.

The actual contents, provided by YouTuber BoYin Lee are:

02:06 01. Super Centered
place-items: center

03:03 02. The Deconstructed Pancake
flex: 0 1 <baseWidth>

04:36 03. Sidebar Says
grid-template-columns: minmax(<min>, <max>) ...

06:12 04. Pancake Stack
grid-template-rows: auto 1fr auto

07:45 05. Classic Holy Grail Layout
grid-template: auto 1fr auto / auto 1fr auto

10:04 06. 12-Span Grid
grid-template-columns: repeat(12, 1fr)

11:47 07. RAM (Repeat, Auto, Minmax)
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

13:56 08. Line Up
justify-content: space-between

16:08 09. Clamping My Style
clamp(<min>, <actual>, <max>)

18:35 10. Respect for Aspect
aspect-ratio: <width> / <height>

3 thoughts on “10 modern layouts in 1 line of CSS”

    1. I’m the oddball in my bootcamp. I enjoy CSS more than JS. The majority of the other students are really into back-end, which I don’t mind, but there’s more of a creative outlet in front-end to me, and right now, its really my only creative outlet.

      There are some good CSS tutorials on TY, and a few design channels I follow that also dive into it a bit. I’ve been meaning to post about them (and so much more) for months, but I’ve been really overwhelmed at several points at the bootcamp. Once I carve out time to take a breather, I’ll share some.

      Like

      Reply
  2. Pingback: Flexbox design patterns you can use in your projects – REDO FROM START

Leave a comment