CSS quick maffs

You need to make a responsive grid that should wrap its columns on smaller screens. That's whay you do:

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, auto));

Replace 15rem with minimal width of a grid cell. Putting 0 there is bad because columns won't wrap then.

Now, let's make our task harder. We want the same grid, but we want say 4 columns max. That's what we should do:

.grid {
--columns: 4;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(15rem, (100% - (var(--columns) - 1) * 1rem) / var(--columns)), 1fr));

--columns regulate the maximum amount of columns we can have.

Aight bye

  • 2
  • 1
    This is amazing, thank you
  • 2
    CSS is coming ever closer to a proper programming language.and I'm here for it.

    The web needs to outgrow the structure of a document format to serve the role of a GUI standard.
  • 0
    @lbfalvy I agree. There was a time when websites are documents. But today, websites are apps.
Add Comment