Select Page

Category: CSS Grid

CSS Grid in IE: Duplicate area names now supported!

Autoprefixer is now up to version 9.3.1 and there have been a lot of updates since I wrote the original three-part CSS Grid in IE series — the most important update of which is the new grid-areas system. This is mostly thanks to Bogdan Dolin, who has been working like crazy to fix loads of Autoprefixer issues. Autoprefixer’s grid translations were powerful before, but they have gotten far more powerful now! Article Series: Debunking common IE Grid misconceptions CSS Grid and the new Autoprefixer Faking an auto-placement grid with gaps Duplicate area names now supported! (This Post) How Autoprefixer...

Read More

Understanding the difference between grid-template and grid-auto

Ire Aderinokun: Within a grid container, there are grid cells. Any cell positioned and sized using the grid-template-* properties forms part of the explicit grid. Any grid cell that is not positioned/sized using this property forms part of the implicit grid instead. Understanding explicit grids and implicit grids is powerful. This is my quicky take: Explicit: you define a grid and place items exactly where you want them to go. Implicit: you define a grid and let items fall into it as they can. Grids can be both! Direct Link to Article — Permalink The post Understanding the difference between grid-template and grid-auto appeared first on CSS-Tricks....

Read More

Preventing a Grid Blowout

Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr. .grid { display: grid; grid-template-columns: 1fr 300px; } That’s somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside. So, if you had too little content, then your column might not fill the entire space you want it to. But...

Read More

Don’t use empty or low content for your design system grid examples

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave. For example, take this (contrived) grid setup: .grid { display: grid; grid-template-columns: 1fr minmax(50px, 100px) 20% auto; } Each of those columns will behave differently. I’m just wrapping my head about this, and definitely don’t fully understand it. Here’s what it seems like to me, numbered 1-4 based on the “strength” (I guess?) of the width. .grid { display: grid; grid-template-columns: 1fr /* #4 - Weakest, will fill remaining space */ minmax(50px, 100px) /* #3 - Will only start changing when other columns force it */ 20% /* #1 - Definite size, steady */ auto /* #2 - Indefinite size, entirely based on content, pushy */ ; } This is much different from quite a long history of how we’ve set up grid columns in the past. Float-based grids typically use percentages (a definite size) to set columns. Same with inline-block-based grids, typically. Even with grid, if you set up all your columns with all percentages or all fractional units, you’d likely have a steady grid in which the content inside won’t mess with sizing. But Jen...

Read More

Changes on CSS Grid Layout in percentages and indefinite height

This is a wonderfully nerdy deep dive into a very specific CSS change by Manuel Rego Casasnovas. Here’s a bit of terminology we should know: First question is, what is an indefinite size? The simple answer is that a definite size is a size that you can calculate without taking into account the contents of the element. An indefinite size is the opposite, in order to compute it you need to check the contents first. And then goes on to explain how complicated this all gets. The change, in a nutshell: Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. Manuel provides a nice visual demo: See the Pen [css-grid] Percentage row tracks by Manuel Rego Casasnovas (@mrego) on CodePen. Direct Link to Article — Permalink The post Changes on CSS Grid Layout in percentages and indefinite height appeared first on CSS-Tricks....

Read More
www.000webhost.com