Aspect Ratios for Grid Items

We've covered Aspect Ratio Boxes before. It involves trickery with padding such that an element's width and height are in proportion to your liking. It's not an ultra-common need, since fixing an element's height is asking for trouble, but it comes up.

One way to lower the risk is The Psuedo Element Tactic, in which a pseudo element pushes its parent element to the aspect ratio, but if the content inside pushes it taller, it will get taller, aspect ratio be damned.

You can use that technique in CSS grid with grid items! Although there are a couple of different ways to apply it that are worth thinking about.

#Remember that grid areas and the element that occupy them aren't necessarily the same size.

We just covered this. That article started as a section in this article but felt important enough to break off into its own concept.

Knowing this, it leads to: do you need the grid area to have an aspect ratio, and the element will stretch within? Or does the element just need an aspect ratio regardless of the grid area it is in?

#Scenario 1) Just the element inside needs to have an aspect ratio.

Cool. This is arguably easier. Make sure the element is 100% as wide as the grid area, then apply a pseudo element to handle the height-stretching aspect ratio.

<div class="grid">
  <div style="--aspect-ratio: 2/1;">2/1</div>
  <div style="--aspect-ratio: 3/1;">3/1</div>
  <div style="--aspect-ratio: 1/1;">1/1</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}
.grid > * {
  background: orange;
  width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Which leads to this:

Note that you don't need to apply aspect ratios through custom properties necessarily. You can see where the padding-bottom is doing the heavy lifting and that value could be hard-coded or whatever else.

#Scenario 2) Span as many columns as needed for width

I bet it's more likely that what you are needing is a way to make a, say 2-to-1 aspect ratio element, to actually span two columns, not be trapped in one. Doing this is a lot like what we just did above, but adding in rules to do that column spanning.

[style="--aspect-ratio: 1/1;"] {
  grid-column: span 1;
}
[style="--aspect-ratio: 2/1;"] {
  grid-column: span 2;
}
[style="--aspect-ratio: 3/1;"] {
  grid-column: span 3;
}

If we toss grid-auto-flow: dense; in there too, we can get items with a variety of aspect ratios packing in nicely as they see fit.

Now is a good time to mention there little ways to screw up exact aspect ratios here. The line-height on some text might push a box taller than you want. If you want to use grid-gap, that might throw ratios out of whack. If you need to get super exact with the ratios, you might have more luck hard-coding values.

Doing column spanning also gets tricky if you're in a grid that doesn't have a set number of rows. Perhaps you're doing a repeat/auto-fill thing. You might end up in a scenario with unequal columns that won't be friendly to aspect ratios. Perhaps we can dive into that another time.

#Scenario 3) Force stuff

Grid has a two-dimensional layout capability and, if we like, we could get our aspect ratios just by forcing the grid areas to the height and width we want. For instance, nothing is stopping you from hard-coding heights and widths into columns and rows:

.grid {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-template-rows: 100px 200px 300px;
}

We normally don't think that way, because we want elements to be flexible and fluid, hence the percentage-based techniques used above for aspect ratios. Still, it's a thing you can do.

 

This example forces grid areas to be the size they are and the elements stretch to fill, but you could fix the element sizes as well.

#Real world example

Ben Goshow wrote to me trying to pull this off, which is what spurred this:

Part of the issue there was not only getting the boxes to have aspect ratios, but then having alignment ability inside. There are a couple of ways to approach that, but I'd argue the easiest way is nested grids. Make the grid element display: grid; and use the alignment capabilities of that new internal grid.

Note in this demo instead of spanning rows, the elements are explicitly placed (not required, an example alternative layout method).

Source: https://css-tricks.com/aspect-ratios-grid-...

5 Quick Resources for Mastering CSS Grid Layout

In today’s quick tip I’ll show you five resources for mastering CSS Grid Layout. Let’s dive in!

A Quick Introduction to Grid

Grid Layout is arguably one of the most significant developments for web developers since the birth of CSS. It’s a layout system specifically for use with grid-based user interfaces, meaning that the standard “float” approach (something of a hack, let’s be honest) is no longer needed as a primary means of laying out a web page.

The first Working Draft was published in 2011, and, believe it or not, we have Microsoft to thank for much of its development; three of the initial four authors were part of the Microsoft team. That initial version is outdated now, having since been replaced by CSS Grid Layout Module Level 1.

5 Handy Resources

Browser support for Grid is already very promising, so it’s high time you became familiar with the syntax. Here are some great resources to kick you off.

Mozilla: Introduction to CSS Grid Layout

The first example comes from Mozilla. It’s introduction to CSS Grid Layout covers the basics, but also advanced concepts such as naming lines. It’s a thorough resource, but also beautifully presented with clear navigation, attractive graphics, and pens you can fork and play with.

learncssgrid.com

Another thorough resource is learncssgrid.com by Jonathan Suh. It explains the theory behind the syntax, whilst also showing examples of some of the most common layout patterns you might need.

CSS Tricks: A Complete Guide to Grid

Next up we head over to CSS Tricks for a great resource by Chris House (in the video I mistakenly credited Chris Coyier, apologies for that). The “Complete Guide to Grid” is exactly what you’d expect; very complete. It details properties for grid container and grid items in separate columns. Awesome work, as usual, from CSS Tricks.

Grid by Example

“Grid by Example” is developed and maintained by Rachel Andrew (herself a member of the working group for CSS Grid Layout) and has been around for quite some time. Besides the “get started guide”, which gives you all the essential information about the spec, it gives you lots of examples and “grab and go” patterns for the most common layouts.

 

CSS Grid Courses on Envato Tuts+

If you prefer learning by video, I strongly recommend (obviously!) you take a look at these courses by Craig Campbell. The first (3 CSS Grid Projects for Web Designers) walks you through three CSS Grid projects, with examples on Codepen for you to fork and practice on.

3 CSS Grid Projects for Web Designers

Craig’s most recent course (Bringing CSS Grid Layout and Flexbox Together) explains how you can use two of CSS’s most powerful layout modules (Grid and Flexbox) together.

Bringing CSS Grid Layout and Flexbox Together

Go Forth and Learn!

This quick roundup gives you a great start for learning CSS Grid. All the resources here include practical examples which you can use to dig in and reinforce the theory. I’ll leave you with a few more tutorials, but until next time–happy learning!

Source: https://webdesign.tutsplus.com/tutorials/5...