How to properly reset grid-template-columns?
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
andgrid-template-columns
properties
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;
}
}