CODEWITHSUNDEEP
htmlcsscss-grid
amar
amar

Reputation: 493

CSS grid-template-areas takes space even column and row is blank

I have a NAV which contains conditional items to be displayed. I used CSS grid to build it by using grid-template-areas. But, when the items are not available, it still leaves the space for those. How do I avoid that. I don't want any space between the items.

Note: I know I can use grid-template-columns But, I want to find out if there is a way with grid-template-areas. If not, I will go with grid-template-columns. Also, I don't want to use any conditional classes.

*{
  margin: 0;
  box-sizing: border-box;
}
nav{
  display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto 100px;
    grid-template-areas: "home prog learn contact login lang";
  background: skyblue;
  padding: 24px;
}
.home{
  grid-area: home;
}
.contact{
  grid-area: contact;
}.login{
  grid-area: login;
}
.prog{
 grid-area: prog;
 }
 .learn{
 grid-area: learn;
 }
 .lang{
 grid-area: lang;
 }
<nav>
  <a class="home">home</a>
  <!-- <a class="prog">Conditional NAV</a> -->
  <!-- <a class="learn">Conditional NAV</a> -->
  <a class="contact">contact</a>
  <a class="login">login</a>
  <!-- <a class="lang">Conditional NAV</a> -->
</nav>

Upvotes: 0

Views: 727

Answers (1)

Paulie_D
Paulie_D

Reputation: 115100

Don't use grid-template-areas and the elements will just fall into place.

* {
  margin: 0;
  box-sizing: border-box;
}

nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr);
  background: skyblue;
  padding: 24px;
  margin-bottom: 1em;
}

a {
  border: 1px solid red;
}
<nav>
  <a class="home">home</a>
  <a class="prog">Conditional NAV</a>
  <a class="learn">Conditional NAV</a>
  <a class="contact">contact</a>
  <a class="login">login</a>
  <a class="lang">Conditional NAV</a>
</nav>

<nav>
  <a class="home">home</a>
  <!-- <a class="prog">Conditional NAV</a> -->
  <!-- <a class="learn">Conditional NAV</a> -->
  <a class="contact">contact</a>
  <a class="login">login</a>
  <!-- <a class="lang">Conditional NAV</a> -->
</nav>

Upvotes: 3

Related Questions