How to properly reset grid-template-columns?

Question

I have a two column layout in CSS grid and would like to toggle to a single column layout at 1024px.

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

@media (max-width: 1024px){
  .page{
    display: block;
  }
}

Is changing the display type a complete solution for disabling grid-template-rows etc., or should they explicitly reset?

Are there any "gotchas" when setting display types using grid.

Preceptive

instead of setting display: block you can do grid-template-columns: auto for a 1 column layout thereby not losing the gap between the divs - see jsfiddle.net/0q7h25dw – Ribaudo

Answer 1

The initial value of grid-template-columns and grid-template-rows is none.

So to reset the properties (meaning there are no explicit tracks created), you would switch to grid-template-columns: none in your media query.

You can also switch to grid-template-columns: 1fr, which creates a grid with one explicit column.

article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

section {
  background-color: green;
}

@media (max-width: 600px) {
  article {
    grid-template-columns: 1fr;
    /* OR, change value to 'none' */
  }
  section {
    background-color: orangered;
  }
}

<article>
  <section></section>
  <section></section>
</article>

jsFiddle demo

Spec reference:

• § 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

Volumetric

Nice answer! Question: do you find Grid a better choice for site layouts versus Flexbox? I've been using the latter with great results and am starting to explore Grid but still unsure of which would make more sense. I guess it's better for dynamic content since it doesn't depend on HTML source as much? What do you think. – Fabrizio

@Adrift, Ever since modern browsers implemented Grid in 2017, I've been using Grid for site layouts almost exclusively. Grid can easily do many things that are difficult for flexbox. For smaller and simpler layout projects I tend to stick with flexbox. That said, there are various flexbox advantages over grid worth noting. – Volumetric

The browser support is very exciting! It's about time. And thank you for the feedback, am going to read the answers now :) – Fabrizio

Awesome. Thank you for such a thorough answer @Michael_B!! – Preceptive

@Michael_B: I also wanted to get your opinion on combining Grid & Flexbox? E.g. if a Grid container would structure the overall layout (with grid items and grid areas) and Flexbox controlling elements within those grid items. Would that be viable for complex layouts or is it better practice to stick with one? – Fabrizio

In my experience, combining grid and flex layout can lead to good optimization. I have found it useful and efficient to use Grid for the larger layout, and flex for nested elements. Here's one use-case I've written about: Centering in CSS Grid. @Fabrizio – Volumetric

In fact, the Grid spec itself encourages combining Grid and Flex properties as "complementary tools". w3.org/TR/css3-grid-layout/#intro @Fabrizio – Volumetric

@Michael_B: Thanks for the quick response and your excellent answer! Very interesting stuff. It's incredible how powerful these two modules are. Going to read your answer & the spec in detail later tonight, at work now. Dealing with Magento 2 gives headaches, hence why I procrastinate on SO about cool CSS3 stuff :p – Fabrizio

No problem, @Adrift. Happy to assist. – Volumetric

Answer 2

Also consider using unset:

grid-template-columns: unset;

Which resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

So:

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

@media (max-width: 1024px) {
  .page {
    /* Here: */
    grid-template-columns: unset;
  }
}

Mindymine

The unset works best for me as I'm switching for flex from 1024 – Headband

For me, unset caused issues on old browsers (e.g. Chrome v57). I used 1fr instead to get 1 column – Littles

Answer 3

The most simple way to reset any CSS property to its initial value is to use initial value. It will work on any property and you won't have to worry about any property defaults.

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

.item {
  height: 100px;
  background-color: green;
}

@media (max-width: 1024px) {
  .page {
    grid-template-columns: initial;
  }
}

<div class="page">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

But in the current case 1fr and none will work as well, of course.

Moon