Skip to main content
CSS is fun and cool and I like it.

Articles Tagged grid-template-rows

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
2 Articles
{
,

}
Link

Accordion Rows in CSS Grid

Avatar of Chris Coyier
Shared by
Chris Coyier

I’d bet grid-template-columns is used about 10× more than grid-template-rows, but maybe everyone has just been missing out. Eric Meyer chucks a bunch of row lines onto his main site layout grid like this:

grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content);

That way, if you need to use them they are they for you:

I like this pattern. It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and

… Read article “Accordion Rows in CSS Grid”
Our Notes   /   Read at meyerweb.com
Almanac

grid-template-columns / grid-template-rows

Avatar of Dennis Gaebel
Author
Dennis Gaebel
1 Comment
Join Conversation

The grid-template-rows and grid-template-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;).

There are also -ms-grid-columns and -ms-grid-rows, which are the old IE version of this. You may want to consider Autoprefixing to get them, or not, your call. There was also a weird period where they were grid-definition-columns and grid-definition-rows, but that’s not a thing anymore.

Here’s an example derived from Microsoft’s … Read article “grid-template-columns / grid-template-rows”