Grid areas not laying out properly in CSS Grid

问题

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>

回答1:

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).

回答2:

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>

来源：https://stackoverflow.com/questions/45647833/grid-areas-not-laying-out-properly-in-css-grid

标签

html

css

css3

css-grid