Chase McCoy wrote a great article about the “gap problem” when creating project grids. His argument can be summarized as follows: How should we use margins in CSS to set element spacing? He pointed out that when used with flexbox, the gap attribute is not perfect enough, for example:

 .grid {
  display: flex;
  gap: 10px;
}

Currently using gap with flexbox is only supported in Firefox, and I have forgotten this in several projects. So pay attention to this.

Anyway, my favorite part of Chase's blog post is the technique he mentioned for Andy Bell to create responsive layouts without media queries, like this:

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

The function of this CSS code is as follows:

• Create a grid with 10px gap between columns and rows.
• The minimum width of each column is 150px.
• Each column has the same width (1fr).
• The grid should automatically fill as many columns as possible.

The cleverest thing about all of this is that our grid now effectively implements responsiveness due to minmax - if the browser is resized, the grid will automatically adjust to a smaller number of columns, like this:

No media inquiry is required at all! Of course, there are several other ways to do this, but I think this approach is clever, not just because we avoid media queries — but because it teaches us to think about designing and building components in a new way.

Chase continued:

With this technique, instead of using breakpoints to specify the screen size that the project should stack, instead specify the minimum size that elements should have before stacking. I like this because it encourages developers to think about responsive design from a behavior rather than screen size perspective.

"Behavior rather than screen size" is an excellent way to think about component design! Many of the problems I have when creating components for design systems are because I have been thinking about screen sizes—mobile devices, tablets, desktops, etc.—and trying to adapt these components to these limitations.

Thinking from a behavioral perspective is always more effective because there are many other factors that affect the component besides the screen or device width we are using. Maybe we want that component to fit another component. Or we want to align some auxiliary text with it for comparison.

Either way, it is actually not entirely possible to think from the perspective of behavior rather than screen size before owning a container query, as Chris wrote:

Container queries are always the top list of improvements required in CSS. The general view is that if we have container queries, we won't write many global media queries based on page size. This is because we are actually trying to control a more local container, and the only reason we are using media queries for this now is that it is the best tool we have in CSS. I totally believe in this.

The above is the detailed content of Thinking in Behaviors, Not Screen Sizes. For more information, please follow other related articles on the PHP Chinese website!