CSS Сетка: одинаковые имена контента и имена областей для разных грид-контейнеров на одной странице. - PullRequest
Новая
       45

CSS Сетка: одинаковые имена контента и имена областей для разных грид-контейнеров на одной странице.

0 голосов
/ 06 августа 2020

У меня вопрос по сетке CSS. Я читал спецификации, но до сих пор мне это не ясно. *

Может быть, это более понятно. 

.grid-container-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: 
                        "Header Header Header Header"
                        "Main-Space Mian-Space Main-Space Main-Space"
                        "Footer Footer Footer Footer";
}
.Header { grid-area: Header; }
.Main { grid-area: Main-Space; }
.Footer { grid-area: Footer; }

.grid-container-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: 
                        "Title Title Title"
                        "Main-Space Main-Space Main-Space"
                        "Info Info Info";
}
.Title { grid-area: Title; }
.Main { grid-area: Main-Space; }
.Info { grid-area: Info; }

Я вижу две проблемы с этим и последний вопрос:

(a) Main-Space имеет одинаковое имя в двух разные схемы.

(b) Основной контент, как он узнает, какому контейнеру сетки он принадлежит?

(c) Как избежать проблем при добавлении сторонних таблиц стилей на свои веб-страницы и они используют такие же имена для содержимого или контейнеров, как вы?

1 Ответ

1 голос
/ 06 августа 2020

Надеюсь, это поможет. Я использовал Mozilla Firefox, чтобы помочь мне с сеткой (вы можете увидеть изображение ниже).

image 

.main-container {
  display: flex;
  width: 100%;
  justify-content: center;
}

div {
  font-size: 50px;
}

.grid-container-1 {
  background-color: cornflowerblue;
  height: 500px;
  width: 500px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas:
    "Header Header Header Header"
    "Main-Space Main-Space Main-Space Main-Space"
    "Footer Footer Footer Footer";
}

.grid-container-2 {
  background-color: coral;
  height: 500px;
  width: 500px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas:
    "Title Title Title"
    "Main-Space Main-Space Main-Space"
    "Info Info Info";
}

.Header {
  background-color: crimson;
  grid-area: Header;
}
.Main {
  background-color: greenyellow;
  grid-area: Main-Space;
}

.grid-container-1 .Main {
  border: 5px solid black;
}

.grid-container-2 .Main {
  border: 5px solid red;
}

.Footer {
  background-color: orangered;
  grid-area: Footer;
}
.Title {
  background-color: blueviolet;
  grid-area: Title;
}
.Info {
  background-color: teal;
  grid-area: Info;
}
<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title></title>
</head>

<body>
  <div class="main-container">
    <div class="grid-container-1">
      <div class="Header"></div>
      <div class="Header"></div>
      <div class="Header"></div>
      <div class="Header"></div>
      <div class="Main">1</div>
      <div class="Main">1</div>
      <div class="Main">1</div>
      <div class="Main">1</div>
      <div class="Footer"></div>
      <div class="Footer"></div>
      <div class="Footer"></div>
      <div class="Footer"></div>
    </div>
    <div class="grid-container-2">
      <div class="Title"></div>
      <div class="Title"></div>
      <div class="Title"></div>
      <div class="Main">2</div>
      <div class="Main">2</div>
      <div class="Main">2</div>
      <div class="Info"></div>
      <div class="Info"></div>
      <div class="Info"></div>
    </div>
  </div>
</body>

</html>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...