Select Page

Category: CSS Grid

CSS Grid in IE: Faking an Auto-Placement Grid with Gaps

This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane. In Part 1, I covered some of the common misconceptions that people have about IE11’s native CSS grid implementation. In Part 2, I showed the world how easy it actually is to write IE-friendly CSS grid code. Today, I’m going step away from CSS grid for a moment to show you a flexbox technique that replicates basic CSS grid auto-placement functionality. This CSS grid replica will even look like a grid-gap has been applied to...

Read More

Grid Level 2 and Subgrid

I find the concept of subgrid a little hard to wrap my mind around. I do understand the idea that we want to use nested semantic markup as we like and have elements participate in one grid so we don’t have to flatten our markup just for layout reasons. But that is largely handled by display: contents;. Rachel Andrew explains it in a way that finally clicked for me: I have an item spanning three column tracks of the grid, it is also a Grid Container with three column tracks – however these do not line up with the tracks of the parent… If the nested grid columns were to be defined as a subgrid, we would use the subgrid value of grid-template-columns on that child element. The child would then use the three column tracks that it spanned, and its children would lay out on those tracks. It’s not that the parent disappears, it’s that it shares grid lines with the parent so that getting internal elements to line up with everything else happens naturally. Direct Link to Article — Permalink The post Grid Level 2 and Subgrid appeared first on CSS-Tricks....

Read More

New CSS Features Are Enhancing Everything You Know About Web Design

We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzo. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design. From Jeremy Keith’s notes on Jen’s talk, “Everything You Know About Web Design Just Changed ” at An Event Apart Seattle 2018: This may be the sixth such point in the history of the web. One of those points where everything changes and...

Read More

Counting With CSS Counters and CSS Grid

You’ve heard of CSS Grid, I’m sure of that. It would be hard to miss it considering that the whole front-end developer universe has been raving about it for the past year. Whether you’re new to Grid or have already spent some time with it, we should start this post with a short definition directly from the words of W3C: Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those...

Read More

New flexbox guides on MDN

MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox properties are nicely and conveniently attached to the table of contents, making this extremely easy to use. In this post, Rachel adds helpful thoughts and context about Flexbox. Her comment on Flexbox initially being treated as a silver bullet solution for all our layout issues struck me: Prior to Grid shipping, Flexbox was seen as the spec to solve all of our layout problems, yet a lot of the difficulty in using Flexbox is when we try to use it to create the kind of two-dimensional layouts that Grid is designed for. Once again, we find ourselves fighting to persuade a layout method to do things it wasn’t designed to do. Guilty as charged. I remember being so eager to ditch floats and learn a new syntax that I treated Flexbox as a square peg trying to be fit into a round hole. That definitely bit me on at least one project. Most importantly about this guide is that it forms a sort of trifecta of reference materials on layout specifications provided by CSS: Flexbox, Grid and other Box Alignment properties. Oh, and while we’re on the...

Read More
  • 1
  • 2
000webhost logo