0

Не могу понять почему не работает grid... Кто может подсказать?

.grid1 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0;
  grid-template-areas:
    "withoutText withoutText withoutText"
    "whiteText whiteText whiteText"
    "blueText1 blueText2 blueText4"
    "blueText1 blueText2 blueText5"
    "blueText1 blueText3 blueText6"
    "blueText1 blueText3 blueText7";
  width: 30%;
  text-align: center;
  font-size: 16px;
}

.grid__white {
  grid-area: withoutText;
  height: 70px;
  background: white;
  color: $text-color;
  border: 1px solid rgb(196, 196, 196);
  border-left: 1px solid rgb(196, 196, 196);
  border-top: 1px solid rgb(196, 196, 196);
}

.grid__whiteText {
  grid-area: whiteText;
  height: 70px;
  background: white;
  color: $text-color;
  border: 1px solid rgb(196, 196, 196);
  border-left: 1px solid rgb(196, 196, 196);
  border-top: 1px solid rgb(196, 196, 196);
}

.grid__blueText {
  grid-area: blueText;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText1 {
  grid-area: blueText1;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText2 {
  grid-area: blueText2;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText3 {
  grid-area: blueText3;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText4 {
  grid-area: blueText4;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText5 {
  grid-area: blueText5;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText6 {
  grid-area: blueText6;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText7 {
  grid-area: blueText7;
  height: 70px;
  background: $primary;
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}
<div class="grid1">
      <div class="grid__white"></div>
      <div class="grid__whiteText">会員費</div>
      <div class="grid__blueText1">仕入</div>
      <div class="grid__blueText2">買付</div>
      <div class="grid__blueText3">OEM</div>
      <div class="grid__blueText4">代行手数料 (商品代金に対し)</div>
      <div class="grid__blueText5">リサーチ</div>
      <div class="grid__blueText6">紙・布タグ制作</div>
      <div class="grid__blueText7">OEM・ODM相談</div>
</div>

2
  • 1
    Какое ожидаемое поведение? 9 мая 2020 в 18:07
  • Немного смущает, что у всех блоков стоит height: 70px даже у тех, которые по сетке должны занимать 3 клетки. 9 мая 2020 в 18:42

1 ответ 1

3

Какой вопрос - такой ответ :)

Поскольку из вопроса абсолютно ничего не ясно, я буду считать, что вы хотели сделать именно так.

Почему так? -Я так увидел.

И просто удалил высоту у некоторых элементов)

:root {
  --primary: #4560af;
  --text-color: #52920c;
}

.grid1 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0;
  grid-template-areas:
    "withoutText withoutText withoutText"
    "whiteText whiteText whiteText"
    "blueText1 blueText2 blueText4"
    "blueText1 blueText2 blueText5"
    "blueText1 blueText3 blueText6"
    "blueText1 blueText3 blueText7";
  width: 30%;
  text-align: center;
  font-size: 16px;
}

.grid__white {
  grid-area: withoutText;
  height: 70px;
  background: white;
  color: var(--text-color);
  border: 1px solid rgb(196, 196, 196);
  border-left: 1px solid rgb(196, 196, 196);
  border-top: 1px solid rgb(196, 196, 196);
}

.grid__whiteText {
  grid-area: whiteText;
  height: 70px;
  background: white;
  color: $text-color;
  border: 1px solid rgb(196, 196, 196);
  border-left: 1px solid rgb(196, 196, 196);
  border-top: 1px solid rgb(196, 196, 196);
}

.grid__blueText {
  grid-area: blueText;
  height: 70px;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText1 {
  grid-area: blueText1;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText2 {
  grid-area: blueText2;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText3 {
  grid-area: blueText3;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText4 {
  grid-area: blueText4;
  height: 70px;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText5 {
  grid-area: blueText5;
  height: 70px;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText6 {
  grid-area: blueText6;
  height: 70px;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.grid__blueText7 {
  grid-area: blueText7;
  background: var(--primary);
  color: white;
  border: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
}
<div class="grid1">
      <div class="grid__white"></div>
      <div class="grid__whiteText">会員費</div>
      <div class="grid__blueText1">仕入</div>
      <div class="grid__blueText2">買付</div>
      <div class="grid__blueText3">OEM</div>
      <div class="grid__blueText4">代行手数料 (商品代金に対し)</div>
      <div class="grid__blueText5">リサーチ</div>
      <div class="grid__blueText6">紙・布タグ制作</div>
      <div class="grid__blueText7">OEM・ODM相談</div>
</div>

1
  • Даже добавить нечего) Всё по делу 9 мая 2020 в 21:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.