Select Page

Category: grid

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

Grid areas and the element that occupies them aren’t necessarily the same size.

That’s a good little thing to know about CSS grid. I’m sure that is obvious to many of you, but I’m writing this because it was very much not obvious to me for far too long. Let’s take a close look. There are two players to get into your mind here: The grid area, as created by the parent element with display: grid; The element itself, like a , that goes into that grid area. For example, say we set up a mega simple grid like this: .grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; } If we...

Read More

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins

According to an article from A List Apart about CSS Grid, a “new era in digital design is dawning right now.” With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There’s an entirely new system available for creating layouts, especially with Grid. However, as with most web technologies, browser support is always something of an issue. Let’s look at how we can make the fundamental aspects of Grid work across the browsers that support it, including older versions of Internet Explorer that supported an older and slightly different version of Grid. The Sales Pitch If you visit, you’ll see that CSS Grid is supported in current versions of all major browsers except Opera Mini. So why not start using it? Rachel Andrew wrote extensively on the subject of if it’s “safe to use” or not. It is, assuming you’re OK with a fallback scenario that doesn’t replicate exactly what Grid can do: If your website really needs to look the same in all browsers (whatever that means to you), you won’t be able to use any features only available by using Grid. In that case, don’t use Grid Layout! Use Grid Layout if you want to achieve something that you can’t do in a good way with older technologies. If you’d like to get started...

Read More