Forem: Damon Muma

My favourite line of CSS

Damon Muma — Sat, 23 May 2020 04:51:00 +0000

Hey folks.

This is my favourite line of CSS:

  grid-template-columns: repeat( auto-fill, minmax(min(calc(180px + 12vmin), 100%), 1fr));

Here's what it does:

Not a big deal, eh? just a bunch of squares. But try resizing the codepen window like a weirdo and see how they all just fit! Oooooh.

Here's why I like it:

It (along with a lil display: grid) is a fully responsive grid written with no media queries that keeps a good amount of content on screen for everyone no matter their screen size.

The design goal solved here is basically: "I want all these things to be about yay big, but I want them to tile evenly into a row, and I want them to get a little smaller as there's less room on the screen".

It's to my brain a simple need but the mathy reality of it is pretty complicated. I really like that I can express it with one line of CSS.

There's a lot of cool stuff in this one line, so let's take it apart to let it shine.

Vmin?

The black sheep/vermin of the css unit family, but, vmin is, in fact, the bomb, diggity.

1% of the smaller of the height or width of the viewport

Because here's the problem with sizing everything based on the width of the viewport:

Most people do it this way, and it's why the landscape view of a mobile website is usually a bit garbage. Don't forget to be responsive when you're being responsive!

I'm not saying always use vmin, but it does elegantly allow you to consider tall narrow windows and short wide windows as similarly restricted space-wise, which we usually forget to do on the internet.

Another cool thing you try at home: a vmean unit: calc({n/2}vh + {n/2}vw). This gives you 1% of the average of the viewport height + width — the overall amount of screen space available (This is actually cooler than vmin, but I mainly want to rant about height queries so I'm just tucking it in here.)

calc(vsomething + pixies)?

The above assumes you're doing some 'responsive scaling' of an object in order to make best use of the screen real estate. Combining a base px or em size with a percentage of the viewport allows you to make things smoothly scale up as the window gets bigger (and just got super snazzy with clamp().

This is often used with font-size to quickly achieve slightly bigger text on bigger screens that have room for it. Here's a great overview from a couple days ago

How do you choose how many of each unit to use? The higher the v*, the more it will scale with the screen. Other than that I do some real sloppy head math as a starting point, then try different values and drag the corner of my screen around all over the place like a weirdo until it looks right. Do you have a better way?

(🔥 hot tip: compared to copy, give headings more of the v-units so they scale more dramatically as the screen size changes)

min() ?

Min (along with his friend Max Clamp) is new but very handy. (I also edited this article to add it when I realized that it does work inside minmax, and the trick is just not to have syntax errors 🤦‍♂️).

The trick with minmax is that it favors the minimum, so if your value is wider than the screen (say if you want to base it on 400px, but your container is 300px wide) it will stretch outside its bounds.

This is a weird decision to me—I never want something to stretch outside its container—but you would have to choose one of min or max to win in a fight and The CSS Lobby chose minimum.

the min() function allows us to request the smallest of two values. Inside minmax feels redundant, but it will let you make sure the element never gets too big for its britches, hence minmax( min(calc(180px + 12vmin), 100%), 1fr) (the result of the calc but not more than the size of the container).

Great writeup on this here.

This part is honestly pretty weird and needing it almost makes this not my favourite line of CSS anymore (you don't need it if your base size is small enough. Technically we don't need it here, but it's an important feature to know if you wanna try this at home).

repeat ( auto-fill ( minmax ( ?

There are probably a bunch of blog posts about this one already. To me it was kinda the most exciting part of grid: not needing to mess around with media queries to just put em in a row and let em wrap when they ought to.

Usually they tell you:

repeat(auto-fill, minmax(300px, 1fr))

It makes the thing be at least 300px but stretches it out to fill the rest of the row.

Which is pretty cool. But cmon that responsive scaling just dopens it up that extra bit doesn't it? Bigger screens want bigger stuff!

The old ways

(a.k.a. if you still need to support IE11 😟)

So you could also still do

.tile {
  width: 100%;
}

@media screen and (min-width: 620px){
  width: 50%;
}

@media screen and (min-width: 920px){
  width: calc(100% / 3);
}

@media screen and (min-width: 1150px){
  width: calc(25%);
}

(continued up to 4 more times depending on what sizes we're dealing with)

Or you could do

<div class="container">
  <div class="row">
    <div class="tile col-sm-6 col-md-4 col-lg-3">
      ...
    </div>
  </div>
</div>

But they have their own problems

You have to define potentially arbitrary breakpoints, or arbitrarily use your already existing ones.
You would have to buy into the idea of a 12 column grid system even if you don't want to. (Which also means you can only have a number of items per row that is divisible by 12)
Basically, you have to fill your brain with a lot of stuff that isn't "I want em to fit, and be about this size".

My fav line of css is a bit intense (4 nested functions??) but look at it again:

  grid-template-columns: repeat( auto-fill, minmax(min(calc(180px + 12vmin), 100%), 1fr));

A bit of a mouthful, but it represents the actual task it's solving a lot more directly than the other methods. I know we take grids for granted and many of us live and breathe dividing things into 12, but the fact that you go "this is 6" when you want to have 2 things per row has always felt unnecessarily circuitous to me.

In the wild

Peruse my real-world usecase if you want.

What's missing?

This is great, but I still lament some things about laying things out in CSS Grid that I couldn't figure out a way to do here:

I want to have grid-lines between items instead of just gap, and you kinda just can't do that (you'll see this not really working on the codepen).
I want to be able for the last line's items to be centered instead of left or right aligned, and you kinda just can't do that.

Let me know if there's a way to do those things and thanks for dropping by!

And since we can nest declarations 4 functions deep in CSS now, is it time to introduce a pipe operator? Sorry wrong link try again. Pipe operator

Maintaining an alternating pattern across a responsive grid

Damon Muma — Sun, 29 Sep 2019 19:09:17 +0000

I get dangerously intrigued by problems that seem potentially impossible where CSS is concerned, but completely reasonable from a visual design point of view.

Here's one that cropped up yesterday: a responsive gallery where the pictures alternate dark-themed and light-themed (could also be B&W/color, red-themed/green-themed, photo/drawing or any alternating stylistic property).

In the markup the images alternate. It even looks totally great on its own when there are an odd number of pictures per row. But when there are an even number of itemsPerRow, we get vertical bands because each row starts with a 'light' picture.

What we want, though, is for the diagonal tiling effect to be maintained across every breakpoint. Something like (3 mb gif alert 🚨):

In a nutshell 🥜: The last item in row 1 needs to stylistically match the first item in row 2, but only when there are an even number of items per row.

TLDR for the designers: If your front-end dev said this is impossible, they were wrong 😱! (if you don't need to support IE 😉)

When I first ran across the problem I was stumped. Could I achieve a patterned grid with differing numbers of items per row and the same HTML without using javascript? 🤔

Conceptually what I want here without complicated math, is for the direction of the grid to weave back and forth as I move down the page. Indeed it would be awesome if I could just declare grid-auto-flow: snakes!; and move on to the next problem. Unfortunately no such property exists.

But we can still make it happen in just CSS with some diligence and 3 somewhat advanced but very useful selectors and grid properties:

nth-child selectors
grid-column
grid-auto-flow

I'll explain each of these and then illustrate how to apply them to our situation. Or just jump to the 'solution' and read the code directly.

:nth-child()

The nth-child selector is an important one. It's very powerful, but sometimes a bit difficult to figure out when using it beyond its basic functionality of odd/even/4

:nth-child() also accepts an equation, which will be very useful for manipulating a series of data of an unknown length, which is exactly what we need to do here. If you already know how this one works, feel free to skip this section!

img:nth-child(4n+5) {
 /*  */
}

That would result in selecting the following children:

(4*0)+5 = 5th
(4*1)+5 = 9th
(4*2)+5 = 13th
etc

In case your linear algebra is rusty, there's a pretty straightforward way to apply this.

Given our specific problem, we need to select every xth item, starting with the yth. More englishy, we want to select "the first item of alternating rows of 4". Diving a little deeper, we want to ignore the first row, and start with the 5th item overall (y/firstItem). After that we want to select every 8th item after that (to continue selecting the first column of every other row—(x/itemsPerRow * 2) ). That looks like:

// This is not real javascript! 😉

let y=5
let x=8

equation = (x*n)+y 
selector = `8n + 5`

// or
let itemsPerRow = 4
let firstItem = itemsPerRow + 1 // 5

equation = (itemsPerRow * 2)n + firstItem
selector = `8n + 5`

That wasn't real javascript, just an attempt to illustrate the maths going on here. That same equation will allow us to modify any grid, as we'll see later.

Grid-column

Grid-column is a property that can be assigned to a specific grid-item in order to move it to a different place than where it normally would fall. So if I have something like grid-template-columns: repeat(4, auto) (which places my grid items in rows of 4), I can use grid-column to move a particular item (chosen by nth-child) to a different position.

.grid-item {

/* put the item in the second column */
  grid-column: 2;

/* put the item in the last column */
  grid-column: -1;

/* make the item span between column 2 and column 4 */
  grid-column: 2/4;
}

Cool!

Grid-auto-flow

.grid {
  grid-auto-flow: dense
}

This is the one that makes this even possible. Without it all would be lost (at least until grid-auto-flow: 🐍 is supported 😉).

Normally, when you reposition a grid item, it repositions every following item with it, leaving a gap. If you want to change the order of just the one particular item when using grid-column, the dense keyword takes the other items and moves them up to fill the spaces. It's a little like position: absolute or a float, except the targeted items still take up space. Whoa.

Grid-auto-flow does other stuff, too, but dense is what we came here for.

Putting it all together

So putting these rules together you get something that looks like this:

.grid {
  grid-template-columns: repeat(4, auto);
  grid-auto-flow: dense;
}

/* 4 itemsPerRow, every other row(4*2), starting with the 5th: 8n+5 */
img:nth-child(8n+5) {
  grid-column: 4;
}

The finished pattern

To apply this in the real world, we have to set up the correct repositioning rules for just the breakpoints where they're necessary. Here's some example codepens that use a data attribute instead of a media query to make playing with the results a little nicer.

Example for alternating pattern

Example for cycle of 3

You can also use the same strategy to make a repeating pattern of 3 style types always look aesthetically pleasing no matter the number of items per row.

It gets a little more complicated, but it also provides an example of needing to reposition 2 items per row (row of 6 and a cycle of 3 styles).

CSS + Media queries

For it to work like we actually want it to, via media queries, you would need something like this (example below is for a cycle of 2 and a grid up to 4 per row:

.photo-grid {
  display: grid;
  grid-auto-flow: dense;
}

.photo-grid img {
  width: 100%;
}

/* I don't like min AND max queries (mobile first!), but it makes perfect sense here because we're doing some specific things to the image that we don't want to apply to the 900px breakpoint. */
@media screen and (min-width: 600px) and (max-width: 899px) {
  .photo-grid {
    grid-template-columns: repeat(2, auto);
  }
  .photo-grid img:nth-child(4n + 3) {
    grid-column: 2;
  }
}

@media screen and (min-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(3, auto);
  }
}
@media screen and (min-width: 1200px) {
  .photo-grid {
    grid-template-columns: repeat(4, auto);
  }
  .photo-grid img:nth-child(8n + 5) {
    grid-column: 4;
  }
}

Is it accessible?

This is a question you should always be asking when stumbling across a wacky CSS or JS technique on the internet, and I am thrilled if you're looking at all this thinking "While this is theoretically useful in very specific and uncommon situations, I worry that it isn't fully accessible!"

Indeed! It's important for screen-readers to be able to make sense of a site, and messing with the order of elements visually vs in source can be problematic — 2.4.3: focus order and 1.3.2: meaningful sequence.

If you are ordering your content visually, the order probably isn't inherently important to reading the content of the page, so this should not be an issue! But do keep in mind, if source order is important (i.e. you are explicitly sorting content in a specific order (alphabetically, new→old), or intentionally presenting it in a narrative order) then the visual order and the mark-up order need to be maintained.

Conclusion.

I would love to be able to do this in a breakpoint-free way using, say, repeat(auto-fill, minmax(300px, 1fr) ) and a mythical grid-auto-flow: snake/alternating-rows to essentially eliminate all the weird math. But in the meantime this was the best I could come up with 😅!

Let me know in the comments if you have a cleaner approach to this or a similar problem!