grid Archives | Page 3 of 9 | CSS-Tricks

Link July 30, 2019

Intrinsically Responsive CSS Grid with minmax() and min()

The most famous line of code to have come out of CSS grid so far is:

grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

Without any media queries, that will set up a grid container that has a flexible number of columns. The columns will stretch a little, until there is enough room for another one, and then a new column is added, and in reverse.

The only weakness here is that first value in minmax() (the 10rem value above). If the container is … Read article “Intrinsically Responsive CSS Grid with minmax() and min()”

Our Notes / Read at evanminto.com

Article June 24, 2019

Building a Conference Schedule with CSS Grid

Author

Mark Root-Wiley

It’s hard to beat the feeling of finding a perfect use for a new technology. You can read every handy primer under the sun and ooh-and-ahh at flashy demos, but the first time you use it on your own project… that’s when things really click.

I gained a new appreciation for CSS Grid when building a flexible layout for a conference schedule. The needs of the project aligned perfectly with grid’s strengths: a two-dimensional (vertical and horizontal) layout with … Read article “Building a Conference Schedule with CSS Grid”

grid

Link June 20, 2019

Hello Subgrid!

Shared by

Robin Rendle

Rachel Andrew’s talk at CSSconf is wonderful because it digs into one of the most exciting changes that’s coming soon to a browser near you: subgrid! That’s a change to the CSS Grid spec that allows for much greater flexibility for our visual designs. Subgrid allows us to set one grid on an entire page and let child elements use that very same grid tracks.

The reason why I’m very excited is because this solves one of the most … Read article “Hello Subgrid!”

Our Notes / Read at www.youtube.com

grid subgrid

Link June 12, 2019

Grid, content re-ordering and accessibility

Shared by

Chris Coyier

Take this:

<ol>
  <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. … Read article “Grid, content re-ordering and accessibility”

Our Notes / Read at rachelandrew.co.uk

accessibility flexbox grid

Article May 28, 2019

Using the Grid Shepherd Technique to Order Data with CSS

Author

David Bernegger

Shepherds are good at tending to their sheep, bringing order and structure to their herds. Even if there are hundreds of those wooly animals, a shepherd still herds them back to the farm at the end of the day.

When dealing with data, programmers often don’t know if it is correctly filtered or sorted. This is especially painful when iterating over an array then displaying the data on a site without knowing the locations of each element receiving it. The … Read article “Using the Grid Shepherd Technique to Order Data with CSS”

arrays data grid

Article May 24, 2019

Code as Documentation: New Strategies with CSS Grid

Author

Sally McGrath

I work for Supercool, a fast-moving design agency that makes custom built sites for arts clients, powered by the off-the-shelf system, Craft CMS; it’s high-spec graphic design with relatively demanding typography and art direction. Over the past few months we’ve been moving to CSS grid. We’re transitioning slowly, allowing ourselves to discover new paradigms and design methods, instead of simply porting old habits to a new syntax. … Read article “Code as Documentation: New Strategies with CSS Grid”

grid mixins

Link May 9, 2019

A responsive grid layout with no media queries

Shared by

Robin Rendle

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 “A responsive grid layout with no media queries”

Our Notes / Read at andy-bell.design

grid media queries

Article March 15, 2019

People Digging into Grid Sizing and Layout Possibilities

Author

Chris Coyier

Jen Simmons has been coining the term intrinsic design, referring to a new era in web layout where the sizing of content has gone beyond fluid columns and media query breakpoints and into, I dunno, something a bit more exotic. For example, columns that are sized more by content and guidelines than percentages. And not always columns, but more like appropriate placement, however that needs to be done.… Read article “People Digging into Grid Sizing and Layout Possibilities”

grid intrinsic design

Link March 10, 2019

The Dark Side of the Grid

Shared by

Chris Coyier

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.… Read article “The Dark Side of the Grid”

Our Notes / Read at www.matuzo.at

accessibility grid

Article February 26, 2019

What We Want from Grid

Author

Chris Coyier

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

grid subgrid