You May Not Want A Framework For That — Smashing Journal

The flex shorthand property is a kind of that’s been round for a few years now however nonetheless appears to mystify many people. Earlier than we unpack it, did you additionally discover that we’ve got a brand new locally-scoped --_gap-repeater-calc variable that must be outlined? Let’s do that:

.repeating-flex {
  --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat));
  --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap));

  /* New variables */
  --_gap-count: calc(var(--_flex-repeat) - 1);
  --_gap-repeater-calc: calc(
    var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count)
  );
  
  show: flex;
  flex-wrap: wrap;
  hole: var(--_repeating-flex-gap);

  > * {
    flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc));
  }
}

Whoa, we really created a second variable that --_gap-repeater-calc can use to correctly calculate the third flex worth, which corresponds to the flex-basis property, i.e., the “splendid” measurement we would like the flex objects to be.

If we take out the variable abstractions from our code above, then that is what we’re :

.repeating-flex {
  show: flex;
  flex-wrap: wrap;
  hole: 3vmax

  > * {
    flex: 1 1 calc((100% / 3) - calc(3vmax / 3 * 2));
  }
}

Hopefully, this may enable you to see what kind of math the browser has to do to measurement the versatile objects within the structure. In fact, these values change if the variables’ values change. However, in brief, parts which can be direct kids of the .repeating-flex utility class are allowed to develop (flex-grow: 1) and shrink (flex-shrink: 1) based mostly on the quantity of accessible house whereas we inform the browser that the preliminary measurement (i.e., flex-basis) of every flex merchandise is the same as some calc()-ulated worth.

As a result of we needed to introduce a few new variables to get right here, I’d wish to not less than clarify what they do:

• --_gap-count: This shops the variety of gaps between structure objects by subtracting 1 from --_flex-repeat. There’s one much less hole within the variety of objects as a result of there’s no hole earlier than the primary merchandise or after the final merchandise.
• --_gap-repeater-calc: This calculates the overall hole measurement based mostly on the person merchandise’s hole measurement and the overall variety of gaps between objects.

From there, we calculate the overall hole measurement extra effectively with the next components:

calc(var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count))

Let’s break that down additional as a result of it’s an inception of variables referencing different variables. On this instance, we already offered our repeat-counting non-public variable, which falls again to the default repeater by setting the --layout-default-repeat variable.

This units a spot, however we’re not carried out but as a result of, with versatile containers, we have to outline the flex habits of the container’s direct kids in order that they develop (flex-grow: 1), shrink (flex-shrink: 1), and with a flex-basis worth that’s calculated by multiplying the repeater by the overall variety of gaps between objects.

Subsequent, we divide the person hole measurement (--_repeating-flex-gap) by the variety of repetitions (--_flex-repeat)) to equally distribute the hole measurement between every merchandise within the structure. Then, we multiply that hole measurement worth by one minus the overall variety of gaps with the --_gap-count variable.

And that concludes our repeating grids! Fairly enjoyable, or not less than attention-grabbing, proper? I like a little bit of math.

Earlier than we transfer to the ultimate two structure utility courses we’re making, you may be questioning why we would like so many abstractions of the identical variable, as we begin with one globally-scoped variable referenced by a locally-scoped variable which, in flip, will be referenced and overridden once more by one more variable that’s regionally scoped to a different ruleset. We might merely work with the worldwide variable the entire time, however I’ve taken us by the additional steps of abstraction.

I prefer it this fashion due to the next:

1. I can peek on the HTML and immediately see which structure strategy is in use: .repeating-grid or .repeating-flex.
2. It maintains a sure separation of issues that retains types so as with out working into specificity conflicts.

See how clear and comprehensible the markup is:

The corresponding CSS is prone to be a slim ruleset for the semantic .footer-usps class that merely updates variable values:

.footer-usps {
  --flex-repeat: 3;
  --flex-gap: 2rem;
}

This offers me the entire context I would like: the kind of structure, what it’s used for, and the place to search out the variables. I believe that’s helpful, however you actually might get by with out the added abstractions if you happen to’re seeking to streamline issues a bit.

Fluid Grid And Flex Layouts

All of the repeating we’ve carried out till now could be enjoyable, and we are able to manipulate the variety of repeats with container queries and media queries. However slightly than repeating columns manually, let’s make the browser do the work for us with fluid layouts that routinely fill no matter empty house is offered within the structure container. We could sacrifice a small quantity of management with these two utilities, however we get to leverage the browser’s potential to “intelligently” place structure objects with a number of CSS hints.

Fluid Grid

As soon as once more, we’re beginning with the variables and dealing our solution to the calculations and elegance guidelines. Particularly, we’re defining a variable referred to as --_fluid-grid-min that manages a column’s minimal width.

Let’s take a slightly trivial instance and say we would like a grid column that’s not less than 400px large with a 20px hole. On this scenario, we’re primarily working with a two-column grid when the container is larger than 820px large. If the container is narrower than 820px, the column stretches out to the container’s full width.

If we wish to go for a three-column grid as an alternative, the container’s width ought to be about 1240px large. It’s all about controlling the minimal sizing values within the hole.

.fluid-grid {
  --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min));
  --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap));
}

That establishes the variables we have to calculate and set types on the .fluid-grid structure. That is the total code we’re unpacking:

 .fluid-grid {
  --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min));
  --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap));

  show: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--_fluid-grid-min), 100%), 1fr)
  );
  hole: var(--_fluid-grid-gap);
}

The show is about to grid, and the hole between objects is predicated on the --fluid-grid-gap variable. The magic is going down within the grid-template-columns declaration.

This grid makes use of the repeat() perform simply because the .repeating-grid utility does. By declaring auto-fit within the perform, the browser routinely packs in as many columns because it presumably can within the quantity of accessible house within the structure container. Any columns that may’t match on a line merely wrap to the subsequent line and occupy the total house that’s obtainable there.

Then there’s the minmax() perform for setting the minimal and most width of the columns. What’s particular right here is that we’re nesting one more perform, min(), inside minmax() (which, bear in mind, is nested within the repeat() perform). This a bit of additional logic that units the minimal width worth of every column someplace in a spread between --_fluid-grid-min and 100%, the place 100% is a fallback for when --_fluid-grid-min is undefined or is lower than 100%. In different phrases, every column is not less than the total 100% width of the grid container.

The “max” half of minmax() is about to 1fr to make sure that every column grows proportionally and maintains equally sized columns.

That’s it for the Fluid Grid structure! That mentioned, please do take word that it is a sturdy grid, notably when it’s mixed with trendy relative items, e.g. ch, because it produces a grid that solely scales from one column to a number of columns based mostly on the scale of the content material.

Fluid Flex

We just about get to re-use the entire code we wrote for the Repeating Flex structure for the Fluid Flex structure, however solely we’re setting the flex-basis of every column by its minimal measurement slightly than the variety of columns.

.fluid-flex {
  --_fluid-flex-min: var(--fluid-flex-min, var(--layout-fluid-min));
  --_fluid-flex-gap: var(--flex-gap, var(--layout-default-gap));

  show: flex;
  flex-wrap: wrap;
  hole: var(--_fluid-flex-gap);

  > * {
    flex: 1 1 var(--_fluid-flex-min);
  }
}

That completes the fourth and ultimate structure utility — however there’s one bonus class we are able to create to make use of along with the Repeating Grid and Fluid Grid utilities for much more management over every structure.

Non-obligatory: Subgrid Utility

Subgrid is helpful as a result of it turns any grid merchandise right into a grid container of its personal that shares the guardian container’s observe sizing to maintain the 2 containers aligned with out having to redefine tracks by hand. It’s bought full browser assist and makes our structure system simply that rather more strong. That’s why we are able to set it up as a utility to make use of with the Repeating Grid and Fluid Grid layouts if we want any of the structure objects to be grid containers for laying out any baby parts they comprise.

Right here we go:

.subgrid-rows {
  > * {
    show: grid;
    hole: var(--subgrid-gap, 0);
    grid-row: auto / span var(--subgrid-rows, 4);
    grid-template-rows: subgrid;
  }
}

We have now two new variables, in fact:

• --subgrid-gap: The vertical hole between grid objects.
• --subgrid-rows The variety of grid rows defaulted to 4.

We have now a little bit of a problem: How will we management the subgrid objects within the rows? I see two doable strategies.

Methodology 1: Inline Types

We have already got a variable that may technically be used straight within the HTML as an inline fashion:

This works like a attraction because the variable informs the subgrid how a lot it might probably develop.

Methodology 2: Utilizing The :has() Pseudo-Class

This strategy results in verbose CSS, however sacrificing brevity permits us to automate the structure so it handles virtually something we throw at it with out having to replace an inline fashion within the markup.

Test this out:

.subgrid-rows {
  &:has(> :nth-child(1):last-child) { --subgrid-rows: 1; }
  &:has(> :nth-child(2):last-child) { --subgrid-rows: 2; }
  &:has(> :nth-child(3):last-child) { --subgrid-rows: 3; }
  &:has(> :nth-child(4):last-child) { --subgrid-rows: 4; }
  &:has(> :nth-child(5):last-child) { --subgrid-rows: 5; }
  /* and so on. */

  > * {
    show: grid;
    hole: var(--subgrid-gap, 0);
    grid-row: auto / span var(--subgrid-rows, 5);
    grid-template-rows: subgrid;
  }
}

The :has() selector checks if a subgrid row is the final baby merchandise within the container when that merchandise is both the primary, second, third, fourth, fifth, and so forth merchandise. For instance, the second declaration:

&:has(> :nth-child(2):last-child) { --subgrid-rows: 2; }

…is just about saying, “If that is the second subgrid merchandise and it occurs to be the final merchandise within the container, then set the variety of rows to 2.”

Whether or not that is too heavy-handed, I don’t know; however I like that we’re in a position to do it in CSS.

The ultimate lacking piece is to declare a container on our youngsters. Let’s give the columns a basic class title, .grid-item, that we are able to override if we have to whereas setting each as a container we are able to question for the sake of updating its structure when it’s a sure measurement (versus responding to the viewport’s measurement in a media question).

:is(.fluid-grid:not(.subgrid-rows),
.repeating-grid:not(.subgrid-rows),
.repeating-flex, .fluid-flex) {
    > * {
    container: var(--grid-item-container, grid-item) / inline-size;
  }
}

That’s a wild-looking selector, however the verbosity is actually saved to a minimal because of the :is() pseudo-class, which saves us from having to write down this as a bigger chain selector. It primarily selects the direct kids of the opposite utilities with out leaking into .subgrid-rows and inadvertently deciding on its direct kids.

The container property is a shorthand that mixes container-name and container-type right into a single declaration separated by a ahead slash (/). The title of the container is about to considered one of our variables, and the sort is all the time its inline-size (i.e., width in a horizontal writing mode).

The container-type property can solely be utilized to grid containers — not grid objects. This implies we’re unable to mix it with the grid-template-rows: subgrid worth, which is why we would have liked to write down a extra advanced selector to exclude these situations.

Demo

Take a look at the next demo to see how every little thing comes collectively.

The demo is pulling in types from one other pen that comprises the total CSS for every little thing we made collectively on this article. So, if you happen to had been to switch the .fluid-flex classname from the guardian container within the HTML with one other one of many structure utilities, the structure will replace accordingly, permitting you to match them.

These courses are the next:

• .repeating-grid,
• .repeating-flex,
• .fluid-grid,
• .fluid-flex.

And, in fact, you could have the choice of turning any grid objects into grid containers utilizing the non-obligatory .subgrid-rows class together with the .repeating-grid and .fluid-grid utilities.

Conclusion: Write As soon as And Repurpose

This was fairly a journey, wasn’t it? It’d look like plenty of data, however we made one thing that we solely want to write down as soon as and might use virtually wherever we want a sure kind of structure utilizing trendy CSS approaches. I strongly imagine these utilities can’t solely enable you to in a bunch of your work but additionally lower any reliance on CSS frameworks that you could be be utilizing merely for its structure configurations.

This can be a mixture of many strategies I’ve seen, considered one of them being a presentation Stephanie Eckles gave at CSS Day 2023. I adore it when folks handcraft trendy CSS options for issues we used to work round. Stephanie’s demonstration was clear from the beginning, which is refreshing as so many different areas of internet growth have gotten ever extra advanced.

After studying a bunch from CSS Day 2023, I performed with Subgrid alone and revealed totally different concepts from my experiments. That’s all it took for me to appreciate how extensible trendy CSS structure approaches are and impressed me to create a set of utilities I might depend on, maybe for a very long time.

Under no circumstances am I attempting to persuade you or anybody else that these utilities are good and ought to be used all over the place and even that they’re higher than . One factor that I do know for sure is that by experimenting with the concepts we coated on this article, you’ll get a stable really feel of how CSS is able to making structure work far more handy and strong than ever.

Create one thing out of this, and share it within the feedback if you happen to’re keen — I’m trying ahead to seeing some contemporary concepts!

(gg, yk)