using-responsive-modifiers-to-control-layout-changes

Planning the responsive behavior of a component can be tricky, particularly when the component layout is highly affected by its content.

For example, let’s consider a table component. You may decide to use two different layouts: one optimized for smaller screens (state-a layout), the other for bigger screens (state-b layout).

You would then need to decide the breakpoint for the change of layout and set it in CSS using a media query.

However, the same table component could have two columns or twenty.

If your table has a low number of columns, you may decide to change the layout at a small breakpoint:

table-with-few-columns

For a table with more columns or richer content, instead, you may want to change it later to make sure it does not look too crowded on small screens:

table with more content

Ideally, you should find a breakpoint that works for both of them (and all the other tables you have on your website). You could use a .table class to define the style of the state-a layout, and use a media query to overwrite this style for the state-b layout:

This solution may not be ideal because the breakpoint you choose is a compromise: you could end up with some tables that look too crowded and others too sparse. Even if you find a solution that seems to work with today’s tables, it could easily break with tomorrow’s.

Class Modifiers #

A possible alternative would be to define responsive class modifiers (classes that share the same style but target different breakpoints) to have the option of triggering the layout change at different breakpoints.

If we consider an example with two breakpoints (small and medium), you would have:

.table {
	/* state-a layout style */
}

/* small breakpoint */
@media (min-width: 600px) {
  .table--state-b@sm {
    /* state-b layout style */
  }
}

/* medium breakpoint */
@media (min-width: 1000px) {
  .table--state-b@md {
    /* state-b layout style */
  }
}

then you can apply those modifiers to different

s based on their content:


[email protected]">
[email protected]">

The code defined in the [email protected] class is the same as the one in the [email protected]. Remember, those two classes are used to create the same layout; it’s only applied at different breakpoints.

This approach has two main disadvantages. The first one is the maintainability of your code: if you need to make changes to the state-b layout, you would need to update two different classes ([email protected] and [email protected]). This is something you can solve using a CSS pre-processor (e.g., using SASS mixins).

The second issue is having the CSS code for state-b repeated multiple times in the final CSS (twice if you have two modifiers, but it could be more if you need additional variations!).

Repeat this for all the components and the different media queries, and this could cause a significant increase in your CSS file size.

Solution #

While working on the Table category of the Components Library at CodyHouse, we ended up using a different approach; we defined a class for the state-b layout:

.table {
	/* state-a layout style */
}

.table--state-b {
  /* state-b layout style */
}

We then defined a --table-layout CSS custom property inside the .table class and modified its value using class modifiers:

.table {
  --table-layout: state-a;
}

@media (min-width: 600px) {
  .table--state-b@sm {
     --table-layout: state-b;
  }
}

@media (min-width: 1000px) {
  .table--state-b@md {
     --table-layout: state-b;
  }
}

Note that the class modifiers are now used to change the value of a CSS custom property; there’s no repetition of layout style.

Using JavaScript, we can check whether to add or remove the .table--state-b class based on the value of this CSS custom property. This will apply the proper layout style!

var layout = getComputedStyle(table).getPropertyValue('--table-layout');
table.classList.toggle('table--standard',  layout == 'standard');

This technique allows us to use a single class (.table--state-b) for the layout style, regardless of the media query. Adding a new variation only requires setting the value of a single CSS custom property. No code repetition involved!

In this example, we’ve been working with tables, but you can apply this technique to any component whose responsiveness is highly affected by its content.

Downsides? #

This approach requires JavaScript to work, but that should not be an issue: if JS is off, we serve the state-a version of the table, which is perfectly accessible.

What about CSS custom properties support? Using CSS variables is probably the cleanest and most self-explanatory way. But if you need to support older browsers (e.g., IE 11 and below) you can use a ::before pseudo-element and change its content using the class modifiers:

.table::before {
  display: none;
  content: 'state-a';
}

@media (min-width: 600px) {
  .table--state-b@sm::before {
      content: 'state-b';
  }
}

@media (min-width: 1000px) {
  .table--state-b@md::before {
      content: 'state-b';
  }
}

In JS, you can check the value of the ::before content rather than a custom property. Same result, different browser support! You can decide based on your needs.

That’s it. I hope you find this approach useful. If you use a different technique, I would love to hear it!

responsive-breakpoints-generator

Easily generate the optimal responsive image dimensions

One image for all screen resolutions and different devices is not enough. An image per pixel is too much – so how can someone automatically choose the optimal responsive image sizes?  Learn more…

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

Responsive web design requires developers to determine the image dimensions that best fit their website. This breakpoints generator tool helps developers automatically find the optimal image sizes needed for the best viewing experience in web and mobile apps on a variety of screen sizes.

Common responsive image solutions tend to generate images based on a fixed set of image width values, disregarding the actual saving in file size bytes. To solve this problem, our breakpoint generator tool uses Cloudinary’s advanced algorithms to easily generate best matching breakpoints for each uploaded image.

The algorithmic concept is to find image width values that offer a significant reduction in file size. Images are analyzed to find the best breakpoints on an image by image basis, rather than creating all possible image resolutions, and enables developers to easily create ‘picture’ and ‘img’ HTML5 elements based on the calculated breakpoints.

Want to understand the technical details?  Read more…

responsive-ads-come-to-facebook-with-multiple-text-optimization

Facebook has rolled out a new responsive ad feature similar to what Google Ads launched last year. The feature, dubbed Multiple Text Optimization, allows advertisers to create several versions of headlines, ad copy and descriptions for a single-media ads. Facebook’s ad system then dynamically serves up the combination it determines will deliver the best results.

Advertisers can create multiple text options for their Facebook ads.

Why we should care

You can also use Multiple Text Optimization to test different how kinds (and combinations) of features and benefits resonate with different audiences. This type of multivariate option leaves messaging combinations to the algorithms and can accelerate testing of different types of messaging. The trade-off is in tightly controlling how your ads appear. It’s just one more indication of how machine learning is being applied to ad creative — across all of the major advertising platforms.

For reporting, you can choose the Headline and Body custom columns to see how each variation and combination performs, digital marketing agency first ClickThrough noted. Additionally, a “View more variations” button in Facebook’s ad preview tool allows you to see how your combinations work together before pushing the ads live.

Select these ad creative columns in Facebook Ads Manager to see how multiple headlines and/or body copy variations perform.

More on the news

  • Facebook’s responsive ads feature is different than its A/B testing feature that lets advertisers test different ad formats, visuals, headlines and CTAs with testing based on a specific objective (post engagement, Likes, conversions, etc.).
  • Google first introduced responsive search ads more than a year ago, allowing advertisers to enter multiple headlines and descriptions and have the system automatically serve them in various combinations.
  • Facebook said the option will roll out to all advertisers in the coming weeks.


About The Author

Amy Gesenhues is a senior editor for Third Door Media, covering the latest news and updates for Marketing Land, Search Engine Land and MarTech Today. From 2009 to 2012, she was an award-winning syndicated columnist for a number of daily newspapers from New York to Texas. With more than ten years of marketing management experience, she has contributed to a variety of traditional and online publications, including MarketingProfs, SoftwareCEO, and Sales and Marketing Management Magazine. Read more of Amy’s articles.



css-responsive-list-with-tooltips

Pure CSS responsive ordered list & tooltips made with: counter-reset, counter-increment, content: counter();, ::before/::after, position:absolute; and media queries.

Photo by Pika on Unsplash.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari.


Pure CSS Responsive List & Tooltips Made with:


@import url("https://fonts.googleapis.com/css?family=Roboto Mono|Roboto:400,700&display=swap");

body {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  background: url(https://freefrontend.com/assets/img/css-snippets-demo/002.jpg) no-repeat center center fixed;
  background-size: cover;
}

.list--wrapper {
  position: relative;
  margin: auto 2em;
  max-width: 1140px;
}

.list--title {
  margin: 50px 0 25px;
  padding-bottom: 5px;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid;
}

.list {
  counter-reset: list;
  list-style: none;
  padding: 0;
}

.list--item {
  counter-increment: list;
  position: relative;
  padding-left: 1.4em;
  font-size: 28px;
}

.list--item::before {
  content: counter(list);
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  font-size: 0.4em;
  font-weight: 700;
  line-height: 2em;
  text-align: center;
  color: #141414;
  background-color: #fff;
}

.list--link {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.list--link__header {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 0 6px;
  font-size: inherit;
}

.list--link__description {
  max-width: 650px;
  margin: 0 0 25px;
  padding: 10px 13px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  background-color: #141414;
}

@media (min-width: 575px) {
  .list--item {
    font-size: 30px;
  }
}

@media (min-width: 767px) {
  .list--item {
    font-size: 32px;
  }
}

@media (min-width: 991px) {
  .list--item {
    font-size: 34px;
    margin-bottom: 20px;
  }
  .list--link__header {
    padding-right: 20px;
  }

  .list--link__header span {
    position: relative;
    padding: 0 10px 0 0;
  }
  .list--link__header span::after {
    display: none;
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc(800px - 100%);
    border-bottom: 1px solid;
  }
  .list--link:hover .list--link__header span::after {
    display: block;
  }
  .list--link__description {
    display: none;
    position: absolute;
    top: 50%;
    left: 500px;
    transform: translate3d(0, -50%, 0);
    max-width: calc(100% - 500px);
    padding: 10px 13px;
    border: 1px solid;
    z-index: 2;
  }
  .list--link:hover .list--link__description {
    display: block;
  }
}

@media (min-width: 1199px) {
  .list--item {
    font-size: 36px;
  }
}
the-perfect-responsive-menu

On a desktop, websites have the space to show the full menu, but on a mobile device that space isn’t there, and you want to hide the menu behind a toggle (like a hamburger icon) and show it when people click that toggle. How do you offer both in an accessible way that keeps your HTML simple, without duplicating your menu? That’s what the perfect responsive menu does.

Though the hamburger icon is well known by now, to better help people that are not familiar with it you can show the icon alongside the word “Menu”.

In this article, we’ll show you how to create a responsive menu that uses the same HTML on all viewports, is responsive and looks great. The perfect responsive menu.

The HTML

We start with the HTML.

<nav id="navigation">
    <button aria-expanded="false" aria-controls="menu">Menubutton>
    <ul id="menu" hidden>
        <li><a href="/">Homea>li>
        <li><a href="/benefits">Benefitsa>li>
        <li><a href="/pricing">Pricinga>li>
        <li><a href="/blog">Bloga>li>
    ul>
nav>

The basic menu is as you’ve probably written before. It’s a list of links (an ul) wrapped in a nav element. But two things are different.

First, there’s an extra button. The button has some attributes you might not be familiar with: Aria attributes. With these attributes we can help assistive tools like screen readers know the purpose of the button. In this case, the button controls the element with id “menu”, and it’s currently not expanded.

Second, The menu is initially hidden, using the hidden attribute. We hide it initially because we develop mobile first, and on mobile we only show the button.

The JavaScript

The button by itself won’t do anything. For that, we use JavaScript.

const toggleMenu = document.querySelector("#navigation button");
const menu = document.querySelector("#navigation ul");

toggleMenu.addEventListener("click", function () {
  const open = JSON.parse(toggleMenu.getAttribute("aria-expanded"));
  toggleMenu.setAttribute("aria-expanded", !open);
  menu.hidden = !menu.hidden;
});

When you click on the button, we call a function that will get the current value of the “aria-expanded” attribute, and invert it. It will do the same for the “hidden” attribute on the menu. The JSON.parse function helps us convert the attribute from a string to a real boolean.

At this point, the toggle is functional:

See the Pen wvwQwgo by Kilian Valkhof (@Kilian) on CodePen.

The CSS

Support for the hidden attribute goes back to IE11, but if you need to support older browsers, then adding the CSS below will let you support them. (keep in mind you might need to change the javascript above too)

[hidden] { display: none; }

At a certain width, the viewport will be wide enough to hide the button and show the menu:

@media ( min-width: 40rem ) {
  #navigation button { display: none }
  #menu { display: block }
}

The width at which this happens depends on your design and the length of your menu, so while 40rem works for me, it might not work for you.

To show this in action, toggle the “CSS” panel in the pen below, it will switch between showing just the button and just the menu.

See the Pen The perfect responsive menu (responsive) by Kilian Valkhof (@Kilian) on CodePen.

The finishing touch: styling

At this point, it’s up to you how you want to style the button and the menu. You can make it as simple or complicated as you want.

For example, the mobile menu on the Polypane website uses an svg icon for the menu with an animated growing background and a staggered animation of the menu items. I switched to PostCSS (which allows nesting) to make things a little more readable, but it’s quite a lot of code regardless.

See the Pen The perfect responsive menu (styled) by Kilian Valkhof (@Kilian) on CodePen.

But it doesn’t have to look like this. With just this skeleton HTML and JavaScript, you can use CSS to style it in many different ways. You might choose to slide open the menu like a dropdown, pushing the rest of the content down, or you could have it slide in from the left like a side panel. And using css transforms you can animate the transition in any way you like.

As long as you keep the HTML and the core functionality of the JavaScript intact, you will have an accessible, responsive menu that uses the same HTML on both mobile and wider viewports. The perfect responsive menu.

bootstrap-4-responsive-navigation-menu

Home
/
Snippets
/
Bootstrap 4 responsive navigation menu

Related Tags

navigation

menu

Recent Snippets




Bootstrap 4 responsive navigation menu snippet is created by sanjaysingh using Bootstrap 4.3.1, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 responsive navigation menu snippet example is best for

Bootstrap navigation,

Bootstrap menu,

responsive.A great starter for your new awesome project with 1000 Font Awesome Icons, 4000 Material Design Icons and Material Design Colors at BBBootstrap.com.

25+-awesome-responsive-blog-designs

Whether you’re a blogger looking for the perfect design for your next website or a web designer looking to get inspired for your next project, the process always starts the same way—by exploring designs made by others.

We’re here to make that process easier for you. In this post, we’re featuring a roundup of some of the best and most professional blog designs you can find on the Internet. If you’re working on a new blog layout design, or simply planning on making a new blog, you can start your search for inspiration right here!

We handpicked blogs from 5 popular categories:

Design & Development Blogs

Almost every blog in the design and development niche has beautiful and creative designs. Of all those blogs, these are our favorites.

Smashing Magazine

smashingmagazine

After its recent revamp, Smashing Magazine design looks absolutely gorgeous. The designers weren’t afraid to use bright and attractive brand colors throughout the blog design.

Sixth Story

sixthstory

Sixth Story’s blog layout offers a great lesson on how to design a perfectly minimalist header section to capture the heart of your brand and business.

Designmodo

designmodo

Designmodo’s blog layout looks fairly simple at first, but wait until you scroll down. You’ll notice how the layout automatically adjusts itself to fill the screen as soon as the sidebar area ends to take full advantage of the screen space.

Dieline

thedieline

Dieline blog uses a very bold design style that’s quite refreshing. Their choice of fonts is also interesting.

Creative Boom

creativeboom

Creative Boom shows off their love for minimalism and creativity with their uneven content layout design.

Awwwards Blog

awwwards-blog

Awwwards blog layout features a classic grid-based content design. As a result, it has a very responsive layout as well.

Canva Learn

canva

Canva’s Learn blog has one of the most user-friendly content designs that offer an impressive user experience.

Business & Agency Blogs

The following blogs from various startup businesses and agencies prove that even corporate blogs can be creative at times.

Help Scout Blog

helpscout-blog

Help Scout blog offers a very fast and smooth browsing experience to its users. The best feature of the layout is how the post blocks highlight itself when hovering, making it easier to click and view posts without having to search for the clickable link.

Buffer Blog

buffer

Buffer Blog not only looks and feels great but also offers some of the most informative content on the Internet. It deserves a spot on the list.

InVision Inside Design

invisionapp

InVision’s Inside Design blog uses a creative content layout that features different styles of grids for showcasing its blog posts and videos.

HubSpot Blog

hubspot

HubSpot blog also offers a very interactive experience to its visitors by highlighting posts whenever you hover your mouse over them. It also uses content blocks throughout its design as well.

Evernote Blog

evernote-blog

Evernote Blog has one of the most beautiful minimalist designs. If the blog opt-in for a slightly larger font size, the blog would look simply perfect.

Personal Blogs

With personal blogs, you get all the freedom to design something that shows off your personality. These blogs show how it’s done.

Gary Vaynerchuck

garyvaynerchuk

Gary Vaynerchuck is an entrepreneur who’s built businesses around his personal brand, which you can clearly see on his personal blog.

Austin Kleon

austinkleon

As a writer, you’ll have to use blog space wisely to promote your books and also highlight your profile at the same time. Austin Kleon’s blog does that job well.

Gates Notes

gatesnotes

Even though he’s one of the richest people on earth, Bill Gates uses a very simple layout on his personal blog. Something to think about when designing your personal blog.

Jeff Goins

goinswriter

Jeff Goins is also a writer, but instead of stuffing his blog design with ad space, he uses a minimalist and content-focused blog design to serve readers with minimum self-promotion.

Ethan Marcotte

ethanmarcotte

A list of responsive blogs wouldn’t be complete without mentioning Ethan Marcotte’s personal blog. He’s the guy who started the whole “responsive design” movement.

Technology Blogs

Blogs in the technology niche usually have similar layouts, but these blogs take a different approach.

TechCrunch

techcrunch

TechCrunch is the leader in startup and technology magazine blogs. Their minimal and content-focused blog design is actually quite inspiring.

The Verge

theverge

The Verge is another popular technology blog on the web that uses a metro-style content layout with lots of colors throughout the design.

Futurism

Futurism

Featuring a fixed sidebar section and clean minimalist design, Futurism also offers a great reading experience to its visitors.

Hacker Noon

hackernoon

Hacker Noon manages to truly capture its audience’s attention with its appropriate pixelated and bright colored design.

Engadget

engadget

In terms of readability and user experience, Engadget has the best responsive design and its use of soothing colors makes the design look even better.

Other Creative Blogs

These are blogs that have been designed with a unique approach to offering a more entertaining experience to its users.

MailChimp Blog

mailchimp

MailChimp’s blog uses a highly creative design that shows the true colors of the brand behind this company.

HuffPost Life

huffpost-life

HuffPost’s Life section is a great example of how to design an attractive lifestyle blog that covers multiple topics.

Abduzeedo

abduzeedo

Another impressive design blog that takes full advantage of the screen space.

BuzzFeed

buzzfeed

If you’re making a viral news blog, you can certainly learn a few lessons from the blog that started the viral news trend in the first place.

Adobe Blog

adobe-blog

Adobe’s official blog features a fully responsive and fullscreen design. It also uses many elements like floating navigation bars, read progress bars, and more to improve user experience.

We hope our list will help you find inspiration to design or build your own unique blog. Of course, today it’s much easier to build a blog using WordPress and grab a pre-made WordPress theme to make a blog within a few minutes.

This eliminates the time-consuming and expensive process of coding blogs from scratch. So if you’re new to building websites, it’s worth considering WordPress.

intrinsically-responsive-css-grid-with-minmax()-and-min()

Two rows of black rectangular grid items on a light gray background.

CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!

Before I explain the solution, let’s review the problem. With CSS Grid, we can create a grid of items arranged in equally sized columns and tell those column sizes to adjust based on the amount of available space:

ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  list-style: none;
  padding: 0;
}

ul > * {
  background: black;
  height: 10rem;
}

View on CodePen

This technique uses a number of features in the Grid specification:

  • repeat() tells Grid to create multiple tracks with the same size parameters (not necessarily the same size, though in this case they all end up being the same).

  • auto-fill tells it to create as many tracks as necessary to fill the space.

  • minmax(10rem, 1fr) tells it to determine each track’s size by finding a value between a minium of 10rem and a maximum of 1fr. The fr unit is what makes sure that the tracks are allowed to grow to fill any remaining space.

Thanks to all this, the container adds new columns as it grows. A key feature of this solution is that the columns change based on the container size, not the viewport size. That means we can apply this to a reusable component and be confident that it will always look right, without the need for media queries overriding the default behavior on specific pages. So what’s the problem?

Responsive… Sorta

Single column of black rectangles. They are overflowing from the right side of the light gray background.

Since each grid track has a minimum size of 10rem, they can’t shrink below that size. That means when the container is smaller than 10rem, the grid items overflow the container! To fix this, we’d have to wrap the grid-template-columns delcaration in a media query, like so:

ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr;

  list-style: none;
  padding: 0;
}

@media (min-width: 35.5em) {
  ul {
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  }
}

View on CodePen

But now that we’re in media query-land, our grid only switches when the viewport is small. We can’t put it inside a small container, or we run into the overflow problem all over again. This is why Heydon Pickering and Andy Bell’s Every Layout site generally avoids media queries and CSS Grid, instead achieving intrinsic responsiveness through Flexbox.

Thankfully, with some new additions to the CSS spec that have started landing in browsers, we can fix this issue, allowing CSS Grid to live up to its full potential as a tool for intrinsic web design.

The Intrinsically Responsive Grid

The previous example ran into problems because we were setting a fixed value as the minimum track size. When the container size shrunk, the items didn’t shrink with it, and thus: overflow. But what if we could set a minimum size that would shrink based on the container size, ensuring that our tracks were never too big for their container?

As luck would have it, we can do just that, with the help of the min() function:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

min() accepts one or more values and returns the smallest value. The magic of the function is that, just like calc(), the arguments can use different units, which allows us to return values that change dynamically based on context. In this case, we’re returning the current width of the container, capped at a maximum value of 10rem.

Single column of black rectangles. They are all flush with the edge of the light gray background.

min() is one of three new comparison functions introduced as part of the CSS Values and Units Module Level 4. There’s also max(), which naturally does the inverse of min(). Finally clamp() is a convenience function that applies both a minimum and a maximum to a single value.

In this example, there are two cases we have to worry about, and min() solves for both of them. When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.

In the Real World

I know what you’re thinking. “This sounds cool and all, but I can’t actually use it yet.” You’re only half right.

min() isn’t very well supported, but it is available in at least one browser: Safari quietly implemented both min() and max() a few versions back! Unfortunately there’s no clamp() yet, but you can simulate it using the other two. Plus, Tab Atkins recently announced that Chrome support is on its way. If you want to keep track of browser support, CanIUse has a page for all three functions.

With that good news out of the way, here’s a working version of the code above (open in Safari to see it in action):

ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

  list-style: none;
  padding: 0;
}

View on CodePen

One browser isn’t great, but it doesn’t mean you have to give up on this solution. For now, you can layer it onto your existing code as a progressive enhancement. Here’s my preferred solution:

ul {
  display: grid;
  grid-gap: 1rem;

  /* Partially responsive fallback */
  grid-template-columns: repeat(auto-fill, minmax(calc(10%   7.5rem), 1fr));

  /* Fully responsive version */
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

  list-style: none;
  padding: 0;
}

View on CodePen

This one uses a calc() expression as a fallback. The key part is the calc(10% 7.5rem), which combines a fixed minimum with a percentage width. By computing the minimum based on both of these, we lower the threshold for triggering overflow. Now it will trigger when the container is slightly larger than 7.5rem, whereas in our earlier solution it would trigger at 10rem. This solution is a bit finnicky though, so you’ll want to adjust both the percentage and fixed values to fit your grid’s design.

With this as our fallback, we can take advantage of CSS’s ability to override duplicate property declarations by re-declaring grid-template-columns. Browsers that support min(), namely Safari, will get the fully responsive solution, while Chrome, Firefox, Edge, and others will get the fallback. As more browsers add support for min(), they will automatically switch over to the new layout.

Wrapping Up

The min(), max(), and clamp() functions are really powerful tools, allowing us to toggle between values in real time based on changing conditions. Being able to test them out in a real browser opens up lots of opportunities for exploration, and I’m confident that this little fix for CSS Grid is just scratching the surface of the many ways that developers will use these features going forward.