You want minmax(10px, 1fr) not 1fr | CSS-Tricks

Comments

1. Omar Sarhan

   Permalink to comment# January 22, 2021

   Thanks for the tip! ⚡

   Reply
   • Tom Fields

     Permalink to comment# January 22, 2021

     I dig. Interesting idea. At what point do you have blow outs with the original code?

   • Chris Coyier

     Permalink to comment# January 24, 2021

     This gets into that:

     Preventing a Grid Blowout

2. Trevor

   Permalink to comment# January 22, 2021

   Asking here rather than the blowout page on the off chance the traffic here will turn up an answer. Is there a way to trigger a blowout? Particularly based on row position? There’s a layout I’d like to achieve and I’ve so far been unable to accomplish it. I have two components:

   Fixed width image. It can shrink to the viewport but I don’t want it to shrink in a multicolumn grid.
   Dynamic text content/dynamic width. It can flow/wrap to the viewport, but I don’t want it to wrap in a multicolumn grid.

   I want to achieve this layout without a media query if possible, due to the dynamic nature of the second component.

   The layouts I want are:

   Wide enough for multicolumn, spaced with a gap minmax(20px, 1fr), each component flush to its respective container edge:

   |Component1 gap Component2|
   
   

   Too narrow for multicolumn, each component centered:

   |       Component1       |
   |       Component2       |
   

   This seems like it should be achievable with either Grid or Flex but I gave up after… a lot of different approaches.

   I’m not sure if triggering a blowout could accomplish this, but it feels possible? I’ve also tried repeating columns which felt promising, but I couldn’t find a way to keep the sizing constraints on the components as stated.

   If anyone has a solution I’ll buy you a beer!

   Reply

Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing "hacky" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so…

February 26, 2019

CSS Grid in IE: CSS Grid and the New Autoprefixer

In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article builds on that knowledge. It would be best to go back and read that article first if you haven’t already. Today I’m going to…

July 4, 2018

Things I've Learned About CSS Grid Layout

The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he's going to hop around to different concepts that he's learned on that journey. I like this idea of learning little…

November 2, 2016

The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack.