Usually I use the wrapper as a central container and limit the width to around 62rem or 1000px. The wrapper is set to be max-width: 55rem in this example, so you can see the effect in the context of this tutorial.
#RESPONSIVE GRIDS USING HTML CSS CODE#
Here’s the HTML code for the wrapper element: It’s fine to explicitly set a width sometimes, sure, but creating specific components that only deal with page-wide composition, like the wrapper element make working with flexible component systems a dream! I prefer the latter approach because explicitly sizing the grid itself will reduce its own flexibility. auto-grid utility will keep trying to fill remaining available space, it’s useful to either give the layout itself a maximum width or wrap it with a shared wrapper utility.
How can we improve this layout utility? īecause this. We set this as a Custom Property because we probably never know where this layout will appear, so by making the min-width easily configurable, it can be modified to work in specific contexts.īecause we’re setting a default value at the point of using -auto-grid-min-size, we’re reducing the risk of of creating specificity issues and making sure that if -auto-grid-min-size isn’t set: the grid will still operate as we expect it too. The -auto-grid-min-size Custom Property powers the minimum width. This is how we get that nice flexibility. We declare that as 1fr, which takes 1 portion of the remaining available space.īecause each item in this grid uses 1fr, the remaining space is split up equally between the other items, so if there are 10 items, 1fr is equal to 10% of the remaining available space. Then we tell it what the maximum size should be for each item. We achieve this by telling the function what the smallest size is for our items, by using a CSS Custom Property, which has a fallback of 16rem. The minmax function allows us to clamp our grid items to maintain just the right amount of control. The reason we use grid for this particular utility, though, is the magic function, minmax. Grid-template-columns: repeat(auto-fill, minmax(var(-auto-grid-min-size, 16rem), 1fr)) ĬSS Grid is incredibly powerful for layout but usually, this type of flexible layout utility would use Flexbox, because of its flexibility.
0 kommentar(er)
