How to Hide Elements Not Specified in Grid-Template-Areas

How to hide elements not specified in grid-template-areas?

The grid-template-areas property cannot hide grid items. It is designed to create grid areas.

But your media query can still be very simple.

This is all you need:

@media (max-width: 500px) {

   section:not(.a) { display: none; }

}

jsFiddle demo

article {

  display: grid;

  grid-template-areas: "areaA areaB areaC areaD";

}

@media (max-width: 500px) {

  section:not(.a) { display: none; }

}

.a { grid-area: areaA; }

.b { grid-area: areaB; }

.c { grid-area: areaC; }

.d { grid-area: areaD; }

/* non-essential demo styles */

section {

  height: 50px;

  width: 75px;

  background-color: lightgreen;

  border: 1px solid #ccc;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.2em;

}

<article>

  <section class="d">D</section>

  <section class="b">B</section>

  <section class="c">C</section>

  <section class="a">A</section>

</article>

Hiding grid items

Grid Layout is designed for sizing and positioning grid items. It's not a tool for removing elements from a layout. For that purpose, display: none is a clean and valid solution.

Here's a simplified version of your code:

body {

   display: grid;

   grid-template-areas: "header header header" 

                          "altnav main main" 

                        "footer footer footer";

   grid-template-columns: 150px 1fr 150px;

   grid-template-rows: 100 1fr 50px;

   height: 100vh; 

 }

 

header { grid-area: header; background-color: yellow; }

main   { grid-area: main;   background-color: white;  }

aside  { grid-area: altnav; background-color: gray;   }

footer { grid-area: footer; background-color: black;  }

 

@media screen and (max-width: 600px) {

   body {

     grid-template-areas: "header" "main" "footer";

     grid-template-columns: 100%;

     grid-template-rows: 100px 1fr 50px;

   }

   

   aside { display: none; }

 }

body   { margin: 0; }

<header>HEADER</header>

<main>MAIN</main>

<aside>ASIDE</aside>

<footer>FOOTER</footer>

How to hide elements that have content using grid areas in CSS?

You could reset the grid-templates-rows to grid-template-rows: 70px 40px 0px 290px 50px;
https://codepen.io/anon/pen/JMNpaJ and set display:none to section.item. position:absolute;right:100vwworks to to lay it out of screen. https://codepen.io/anon/pen/vpmdzj But that is when you know it is empty or is to be hidden any times.

Instead you can use :empty and auto. https://codepen.io/anon/pen/NXjyLV so it is hidden only when empty.

In fine, the grid-gap remains visible. It can be reset to 0 and margin on .item might help along the :empty selector and auto value for this specific row:
https://codepen.io/anon/pen/NXjyLV

CSS Grid. Hide unused area

Do you need named template areas?

Could you just define how many columns certain grid items should span?

.name { 
  grid-column: span 3;
}

.lastname {
  grid-column: span 3;
}

.phone { 
  grid-column: span 6;
}

.wrapper {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

How to hide CSS grid-area name display

.grid-container *:after { 
 content:attr(class);
 position: absolute;
 top: 0;
 left: 0;
}

Remove the content:attr(class); property from the above class. You're now adding a content to the grid area that prints your classname.

Show/hide grid-template-row of empty content or if grid area not rendered

Updated Answer (based on changes to the question)

If the Player grid area must be explicitly defined, then change its row in grid-template-rows to auto or min-content. You can then define the height in the component itself (i.e., height: 90px).

---

Original Answer

Consider leaving the Player component out of the explicit grid. In other words, don't define it in grid-template-areas or grid-template-rows.

Use grid-auto-rows: 90px.

If necessary, apply grid-row: 3 to the component.

Or even grid-area: 3 / 1 / auto / -1, which is equivalent to:

• grid-row-start: 3
• grid-column-start: 1
• grid-row-end: auto
• grid-column-end: -1

grid-template-areas: none vs grid-template-areas: dot?

From the specification:

Name: grid-template-areas

Value: none | <string>+

Initial: none

none is a value on its own (grid-template-areas:none) and not a value to be used like grid-template-areas:" none one". the latter will fall under the <string>+ and "none" will become a named area and is different from .

• A sequence of name code points, representing a named cell token with a name consisting of its code points.

• A sequence of one or more "." (U+002E FULL STOP), representing a null cell token.

Below, I am placing 6 at "none" area

.grid-container {
  display: grid;
  grid-template-areas: "one . two three"
                         "four five none six" ;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-area: one;
}

.item2 {
  grid-area: two;
}

.item3 {
  grid-area: three;
}

.item4 {
  grid-area: four;
}

.item5 {
  grid-area: five;
}

.item6 {
  grid-area: none;
}

<div class="grid-container">
  <div class="item1">1</div>
  
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  
  <div class="item6">6</div>
</div>

---

Related Topics