Ways to size content using CSS grid

Using other sizing values such as max-content, min-content, fr and minmax

It’s no surprise I’m using my blog to keep records of things I’ve learned. There are no sharp and well written articles (yet) but mainly a compilation of information so I can consult and remember later. Today I’m writing about this amazing video of this amazing channel called Layout Land.

Other than px, rem and %, we can use other values to dynamically change the sizing of elements in a grid layout.

max-content

It will stretch the size of the box in order to fill the whole content.

min-content

It will squish the box until it can, without break any word outside the box. So basically the width of the box will be the width of the biggest word (if the content is a string)

fr

fr stands for fraction. It takes the space available and splits between all the elements with fr declared.

The beauty is that we can mix fixed sizes with fr units and other units like min-content.

We can even use different fractions like 2.4fr or something like it.

Jen Simmons tip for a good and fresh layout: use different sizes of columns.

minmax

You can declare how the minimun size of the content should be and also the maximum. It’s great for layouts where you can resize and the boxes break and resize automatically.

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  

Above, we are telling the browser to repeat as many times the content fits, for items that would be minimum of 100px and maximum of 1fr. So when the box grows, the items will grow and each one will take 1 fraction of the box. If the box shrinks, the items will be minimum of 100px.

    grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr;
  

This code above defined a minmax column with characters. Pretty cool.

Jen Simmons also challenge the concept of pixel perfect model of building websites.

Design flexibility models for our content

Pretty cool thought!