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.

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 https://jsfiddle.net/0q7h25dw/ — kukkuz, Jun 17 '19 at 16:29

Michael Benjamin · Accepted Answer · 2019-06-17T17:23:30.527

19

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

edited Jun 17 '19 at 17:23

answered Jun 17 '19 at 17:16

Michael Benjamin

346,931
104
581
701

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. – Adrift Jun 17 '19 at 17:27
2

@Adrift, Ever since [modern browsers implemented Grid](https://stackoverflow.com/a/46060829/3597276) 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](https://stackoverflow.com/q/55064488/3597276). – Michael Benjamin Jun 17 '19 at 17:32
1

The browser support is very exciting! It's about time. And thank you for the feedback, am going to read the answers now :) – Adrift Jun 17 '19 at 17:34
1

Awesome. Thank you for such a thorough answer @Michael_B!! – Matthew Jun 17 '19 at 19:37
@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? – Adrift Jun 18 '19 at 15:31
1

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](https://stackoverflow.com/q/45536537/3597276). @Adrift – Michael Benjamin Jun 18 '19 at 15:35
In fact, the Grid spec itself encourages combining Grid and Flex properties as "complementary tools". https://www.w3.org/TR/css3-grid-layout/#intro @Adrift – Michael Benjamin Jun 18 '19 at 15:38
1

@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 – Adrift Jun 18 '19 at 15:43
1

No problem, @Adrift. Happy to assist. – Michael Benjamin Jun 18 '19 at 15:45

score 1 · Answer 2 · answered Nov 24 '21 at 10:20

1

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;
  }
}

answered Nov 24 '21 at 10:20

Darren Shewry

10,179
4
50
46

1

The `unset` works best for me as I'm switching for flex from 1024 – Qiniso May 21 '22 at 13:02
For me, `unset` caused issues on old browsers (e.g. Chrome v57). I used `1fr` instead to get 1 column – 00-BBB Dec 01 '22 at 15:52

score 0 · Answer 3 · answered Jun 23 '19 at 11:00

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.

How to properly reset grid-template-columns?

3 Answers3

jsFiddle demo