CSS3 - области сетки-шаблона не совпадают правильно - PullRequest
Новая
       20

CSS3 - области сетки-шаблона не совпадают правильно

0 голосов
/ 16 декабря 2018

Когда я пытаюсь использовать области сетки, они не охватывают соответствующее количество столбцов.Однако свойство grid-template-columns работает нормально и отображается так, как если бы я вообще не использовал области сетки.

scss: 

.mygrid {
  display: grid;
  padding: 3%;
  grid-template-columns: 1fr;
  grid-template-areas: "a7" "a5" "a10" "a15" "a20";
  grid-gap: 0.4em;
  @media (min-width: 400px) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a7 a7"
      "a5 a10"
      "a15 a20";
  }
  @media (min-width: 600px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "a7 a7 a7 a7"
      "a5 a10 a15 a20";
  }
  .box {
    display: inline;
    padding: 1em;
    box-sizing: border-box;
  }
  .a7 {
    grid-area: a7;
  }
  .a5 {
    grid-area: a5;
  }
  .a10 {
    grid-area: a10;
  }
  .a15 {
    grid-area: a15;
  }
  .a20 {
    grid-area: a20;
  }
}

html: 

<div class="mygrid">
    <div id="7" class="box a7">
      <span>7</span>
    </div>

    <div id="5" class="box a5">
      <span>5</span>
    </div>

    <div id="10" class="box a10">
     <span>10</span>
    </div>

    <div id="15" class="box a15">
      <span>15</span>
    </div>

    <div id="20" class="box a20">
      <span>20</span>
    </div>
</div>

Я не уверен, что является причиной этой проблемы, мой код выглядит правильно

, несмотря на попытку ответа @vals в моем проекте, я все еще получаю ту же проблему.Есть ли что-то общеизвестное, что могло бы каскадно привести к его поломке?

Я также проверил свой HTML, чтобы убедиться, что не было ошибок, вызывающих это.

1 Ответ

0 голосов
/ 16 декабря 2018

изменить идентификаторы на не числа: 

.mygrid {
  display: grid;
  padding: 3%;
  grid-template-columns: 1fr;
  grid-template-areas: "a7" "a5" "a10" "a15" "a20";
  grid-gap: 0.4em;
}

@media (min-width: 400px) {
  .mygrid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a7 a7" "a5 a10" "a15 a20";
  }
}

@media (min-width: 600px) {
  .mygrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a7 a7 a7 a7" "a5 a10 a15 a20";
  }
}

.box {
  display: inline;
  padding: 1em;
  box-sizing: border-box;
}

.b7 {
  grid-area: a7;
  background-color: yellow;
}

.b5 {
  grid-area: a5;
}

.b10 {
  grid-area: a10;
}

.b15 {
  grid-area: a15;
}

.b20 {
  grid-area: a20;
}
<div class="mygrid">
  <div id="7" class="box b7">
    <span>7</span>
  </div>

  <div id="5" class="box b5">
    <span>5</span>
  </div>

  <div id="10" class="box b10">
    <span>10</span>
  </div>

  <div id="15" class="box b15">
    <span>15</span>
  </div>

  <div id="20" class="box b20">
    <span>20</span>
  </div>
</div>
...