Grid, content re-ordering and accessibility

Take this:

    <li>Get hungry</li>
    <li>Order pizza</li>
    <li>Eat pizza</li>
    </ol>
    That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that DOM order. Do nothing, and the list items will flow in the block direction of the document. Apply flexbox, and it will flow in the inline direction of … Read article
    The post Grid, content re-ordering and accessibility appeared first on CSS-Tricks.

    Link: https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/

CSS Grid Level 2 – subgrid is coming to Firefox

The subgrid feature which is part of Level 2 of the CSS Grid Specification is not yet shipping in any browser, but is now available for testing in Firefox Nightly. This is a feature that, if you have used CSS Grid for a layout of any complexity, you are likely to be pretty excited about
The post CSS Grid Level 2 – subgrid is coming to Firefox appeared first on Mozilla Hacks – the Web developer blog.

Link: https://hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/

A responsive grid layout with no media queries

Andy Bell made a really cool demo that shows us how to create a responsive grid layout without any media queries at all. It happens to look like this when you change the size of the browser window:
I think this is a wonderful layout technique that’s just 6 lines (!) of CSS.
.auto-grid {
–auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(–auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
What this shows us is that we don’t have to write a million media … Read article
The post A responsive grid layout with no media queries appeared first on CSS-Tricks.

Link: https://andy-bell.design/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/

The Dark Side of the Grid

Manuel Matuzovic makes the point that in order to use CSS grid in some fairly simple markup scenarios, we might be tempted to flatten our HTML to make sure all the elements we need to can participate on the grid. What we need is subgrid and non-buggy display: contents;, so I’d like to think in a year or so we’ll be past this.
Direct Link to Article — Permalink… Read article
The post The Dark Side of the Grid appeared first on CSS-Tricks.

Link: https://www.matuzo.at/blog/the-dark-side-of-the-grid/#compromising-on-semantics

What We Want from Grid

We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we’re seeing a lot more usage, we’re seeing people want more from grid.
Michelle Barker lists hers wants (and I’ll put my commentary after):

Styling row and column gaps. I’ve also heard requested styling grid cells directly, rather than needing to place an element there and style that element.
Multiple gap values. I wanted

… Read article
The post What We Want from Grid appeared first on CSS-Tricks.

Link: https://css-tricks.com/what-we-want-from-grid/

IE10-Compatible Grid Auto-Placement with Flexbox

If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I’ve discovered a clever CSS-only way to use grid auto-placement in IE10+!
Now, it’s not actually CSS Grid, but without looking at the code itself, you wouldn’t be able to tell. The HTML structure looks like CSS Grid. It has a defined set of columns with an undefined amount of rows and it … Read article
The post IE10-Compatible Grid Auto-Placement with Flexbox appeared first on CSS-Tricks.

Link: https://css-tricks.com/ie10-compatible-grid-auto-placement-with-flexbox/

Quick! What’s the Difference Between Flexbox and Grid?

Let’s go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things… There are plenty of layout situations in which you could use either one … Read article
The post Quick! What’s the Difference Between Flexbox and Grid? appeared first on CSS-Tricks.

Link: https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/