Grid areas not laying out properly in CSS Grid

Question

I want to make my website using CSS grid system but it seems not to be working. Here is my code:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Michael Benjamin · Accepted Answer · 2017-08-13T11:41:44.050

When using the grid-template-areas property, string values must have the same number of columns.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

You can use a period, or an unbroken line of periods, to represent an empty cell (spec reference).

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" " ... about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

From the Grid spec:

7.3. Named Areas: the grid-template-areas property

All strings must have the same number of columns, or else the declaration is invalid.

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Non-rectangular or disconnected regions may be permitted in a future version of this module.

Note: As stated in the spec, in addition to an equal number of columns, grid areas must also be rectangular (see this post for more details).

James Douglas · Answer 2 · 2017-08-12T08:51:48.177

If this:

Is the desired result, then you've only made a minor error.

You've set the grid to be a 2 x 2 square here:

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

But you aren't filling all the space.

  grid-template-areas: "logo faq", "about-us";

That line of code is saying "In the top two squares put logo and faq respectively. In the bottom two rows put about-us" and that causes an error. If you want one grid-area to fill the entire space then you need to declare it twice. Thus the above line becomes:

  grid-template-areas: "logo faq", "about-us about-us";

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq", "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

but i followed the tutorials on the internet and all of them told me to put it this way... Is there any reason why you are telling me to put it this way. do you have any reference???? — Bashir Abdelwahed, Aug 12 '17 at 08:40

Grid areas not laying out properly in CSS Grid

2 Answers2

Linked

Related