why CSS grid is not working as should be?

Question

I built a website,

.info {
  width: 29.5%;
  display: grid;
  align-items: center;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-template-areas: 'number title empty' 'empty para para' 'empty para para';
}

.round {
  background-color: hsl(12, 88%, 59%);
  width: 60px;
  height: 35px;
  padding: 5px 20px;
  border-radius: 30px / 100%;
  color: white;
  grid-area: number;
}

.title {
  grid-area: title;
}

.about {
  background-color: aquamarine;
  grid-area: para;
}

<div class='info'>
  <div class='round'>01</div>
  <h4 class='title'>Track company-wide progress</h4>
  <p class='about'>See how your day-to-day tasks fit into the wider vision. Go from tracking progress at the milestone level all the way done to the smallest of details. Never lose sight of the bigger picture again.</p>
</div>
<div class='info'>
  <div class='round'>02</div>
  <h4 class='title'>Advanced built-in reports</h4>
  <p class='about'>Set internal delivery estimates and track progress toward company goals. Our customisable dashboard helps you build out the reports you need to keep key stakeholders informed.</p>
</div>
<div class='info'>
  <div class='round'>03</div>
  <h4 class='title'>Everything you need in one place</h4>
  <p class='about'>Stop jumping from one service to another to communicate, store files, track tasks and share documents. Manage offers an all-in-one team productivity solution.</p>
</div>

this gives

I am not able to understand why is my code giving an output like this. The element with the class 'round' and 'title' are not visible only element with the class 'about' is visible.

score 1 · Answer 1 · answered Oct 05 '20 at 08:20

Use dots instead of the word empty. Example here.

.info {
  /* width: 29.5%; */
  display: grid;
  align-items: center;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-template-areas: "number title ......" "...... para para" "...... para para";
}

.round {
  background-color: hsl(12, 88%, 59%);
  width: 60px;
  height: 35px;
  padding: 5px 20px;
  border-radius: 30px / 100%;
  color: white;
  grid-area: number;
}

.title {
  grid-area: title;
}

.about {
  background-color: aquamarine;
  grid-area: para;
}

<div class="info">
  <div class="round">01</div>
  <h4 class="title">Track company-wide progress</h4>
  <p class="about">See how your day-to-day tasks fit into the wider vision. Go from tracking progress at the milestone level all the way done to the smallest of details. Never lose sight of the bigger picture again.</p>
</div>
<div class="info">
  <div class="round">02</div>
  <h4 class="title">Advanced built-in reports</h4>
  <p class="about">Set internal delivery estimates and track progress toward company goals. Our customisable dashboard helps you build out the reports you need to keep key stakeholders informed.</p>
</div>
<div class="info">
  <div class="round">03</div>
  <h4 class="title">Everything you need in one place</h4>
  <p class="about">Stop jumping from one service to another to communicate, store files, track tasks and share documents. Manage offers an all-in-one team productivity solution.</p>
</div>

why CSS grid is not working as should be?

1 Answers1