grid Archives | CSS-Tricks

Article July 31, 2019

Bringing CSS Grid to WordPress Layouts

Author

9 Comments

December 6th, 2018 was a special date for WordPress: it marked the release of version 5.0 of the software that, to this day, powers more than one-third of the web. In the past, people working on the platform pointed out that there has never been any special meaning to version numbers used in WordPress releases; as such, WordPress 5.0 was simply the follower to WordPress 4.9. Yet, 5.0 brought possibly the biggest innovation since Custom Post Types were introduced in … Read article

Link July 30, 2019

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

Shared by
Chris Coyier

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

Our Notes / Read at evanminto.com

grid

Article June 24, 2019

Building a Conference Schedule with CSS Grid

Author

Mark Root-Wiley

20 Comments

Join the Conversation

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

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

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

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

2 Comments

Join the Conversation

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

arrays data grid

Article May 24, 2019

Code as Documentation: New Strategies with CSS Grid

Author

Sally McGrath

9 Comments

Join the Conversation

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

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

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

Comments

Go to Comments

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

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

Our Notes / Read at www.matuzo.at

accessibility grid