Блог

Главная - Вопросы по программированию - Области шаблона сетки — проблемы с отображением

Области шаблона сетки — проблемы с отображением

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

Я новичок в CSS Grid, и теперь я играю с ним сейчас. Я хочу создать шаблон сетки 4×4.

В моем коде эта сетка отображается неправильно — проблема в Table_4 . Почему он отображается неправильно? Не могли бы вы, ребята, сказать мне, что я сделал не так? 

 body {
  background-color: gray;
}
.grid {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "item-a item-a item-a item-a"
    "item-b . . ."
    "item-b . . ."
    "item-b . . .";  
}
.item-a {
  grid-area: item-a;
  background-color: lightcoral;
  text-align: center;
}
.item-b {
  grid-area: item-b;
  background-color: lightblue;
  text-align: center;
}
.item-c {
  grid-area: item-c;
  background-color: lightcyan;
  text-align: center;
}
.item-d {
  grid-area: item-d;
  background-color: lightgreen;
  text-align: center;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link rel="stylesheet" type="text/css" href="../sources/css/style.css">
</head>
<body>
  <div class="grid">
    <div class="item-a">Table_1</div>
    <div class="item-b">Table_2</div>
    <div class="item-c">Table_3</div>
    <div class="item-d">Table_4</div>
  </div>
</body>
</html>

Комментарии:

1. вы не определили области item-c и item-d в области шаблона

2. Почему вы ожидали, что они появятся где-то еще?

Ответ №1:

Вам нужно перечислить элемент-c в ваших областях шаблона сетки:

 body {
  background-color: gray;
}

.grid {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "item-a item-a item-a item-a" "item-b item-c item-c item-c" "item-b item-c item-c item-c" "item-d item-d item-d item-d";
}

.item-a {
  grid-area: item-a;
  background-color: lightcoral;
  text-align: center;
}

.item-b {
  grid-area: item-b;
  background-color: lightblue;
  text-align: center;
}

.item-c {
  grid-area: item-c;
  background-color: lightcyan;
  text-align: center;
}

.item-d {
  grid-area: item-d;
  background-color: lightgreen;
  text-align: center;
}  
 <div class="grid">
  <div class="item-a">Table_1</div>
  <div class="item-b">Table_2</div>
  <div class="item-c">Table_3</div>
  <div class="item-d">Table_4</div>
</div>