Почему мой вложенный grid-контейнер не создает столбцы равной ширины? - PullRequest
Новая
       2

Почему мой вложенный grid-контейнер не создает столбцы равной ширины?

1 голос
/ 04 июля 2019

, так что я новичок в сетках CSS, и я возился с этим.Я пытаюсь понять, могу ли я сопоставить макет этого макета в общем смысле с экспериментальным кодом, который я пишу: https://ibb.co/GFYqMRx

Вот мой HTML: 

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body class="body">


    <div class="header">Header</div>
    <div class="side-navigation">Side Navigation</div>

    <main class="main">
      <div class="item search">Search</div>
      <div class="item traffic">Traffic</div>
      <div class="item daily-traffic">Daily Traffic </div>
      <div class="item mobile-users">Mobile Users</div>
      <div class="item social-stats">Social Stats</div>
      <div class="item new-members">New Members</div>
      <div class="item recent-activity">Recent Activity</div>
      <div class="item message-user">Message User</div>
      <div class="item settings">Settings</div>
    </main>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> 
    <script src="app.js"></script>
  </body>
</html>

Вот мой CSS: 

* {
  box-sizing: border-box;
}
.item {
  border: 1px red solid;
}

.header {
  background-color: purple;
  grid-area: header;
}
.side-navigation {
  background-color: orange;
  grid-area: side-navigation;
}
.main {
  background-color: grey;
  grid-area: main;
}

.search {
  grid-area: search;
}
.traffic {
  grid-area: traffic;
}
.daily-traffic {
  grid-area: daily-traffic;
}
.mobile-users {
  grid-area: mobile-users;
}
.social-stats {
  grid-area: social-stats;
}
.new-members {
  grid-area: new-members;
}
.recent-activity {
  grid-area: recent-activity;
}
.message-user {
  grid-area: message-user;
}
.settings {
  grid-area: settings;
}
body {
  display: grid;
  grid-template-rows: 80px 80px 1fr;
  grid-template-areas: 
  "header"
  "side-navigation"
  "main";
}


@media (min-width: 769px) {

  body {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 80px 1fr;
    grid-template-areas:
    "header header"
    "side-navigation main"
  }
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  } 
}

Сначала я смог создать нужный макет, манипулируя линиями сетки, но я хотел посмотреть, смогу ли я сделать то же самое, используя только сетку.свойство template-area.

Для экранов размером более 769 пикселей я разделил вложенный основной контейнер на два столбца, по 1 каждый, но в итоге получил какой-то странный эффект при установке третьего столбца: enter image description here

Почему я не могу создать столбцы равной ширины во вложенном главном контейнере?Разве моя сетка не должна быть поровну разделена пополам, если я добавлю две единицы fr для grid-template-column?

Все работало идеально, пока я не применил сетку к вложенному основному контейнеру.

И почему мои элементы сетки перемешиваются в нижней части экрана, как это?

Ответы [ 2 ]

1 голос
/ 04 июля 2019

Я думаю, что это связано со всеми метками grid-area: без правила grid-template-areas:, чтобы определить, куда они идут. Я только что проверил ваш код в инструментах разработчика, и когда я удалил эти grid-area: метки, он стал сеткой из 2 столбцов.

добавить сетку-шаблон-области для .main 

.main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
    grid-template-areas: 
      "search          traffic"
      "daily-traffic   mobile-users"
      "social-stats    new-members"
      "recent-activity message-user"
      "settings        ............";
}

все лишние (более 1) пробелы в областях-шаблонах-сетках игнорируются, поэтому вы можете добавить дополнительные пробелы для выравнивания столбцов. Также обратите внимание на «.» в конце вы используете '.' или несколько (например, лишние пробелы просто игнорируются), чтобы показать, что эта ячейка пуста. все разрушается, если вы удаляете эти периоды в конце, каждая ячейка должна учитываться в ваших областях-шаблонах сетки.

Рэйчел Эндрю имеет много отличных материалов по сетке CSS. https://www.youtube.com/watch?v=RssSS_xhv2E

0 голосов
/ 04 июля 2019

Это потому, что вы присваиваете области сетки своим элементам внутри основной сетки, фактически не используя свойство grid-area на main. Я удалил их во фрагменте, и основная сетка отображается с двумя равными столбцами: 

* {
  box-sizing: border-box;
}

.item {
  border: 1px red solid;
}

.header {
  background-color: purple;
  grid-area: header;
}

.side-navigation {
  background-color: orange;
  grid-area: side-navigation;
}

.main {
  background-color: grey;
  grid-area: main;
}

.search {}

.traffic {}

.daily-traffic {}

.mobile-users {}

.social-stats {}

.new-members {}

.recent-activity {}

.message-user {}

.settings {}

body {
  display: grid;
  grid-template-rows: 80px 80px 1fr;
  grid-template-areas: "header" "side-navigation" "main";
}

@media (min-width: 769px) {
  body {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 80px 1fr;
    grid-template-areas: "header header" "side-navigation main"
  }
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  }
}
<body>
  <div class="header">Header</div>
  <div class="side-navigation">Side Navigation</div>

  <main class="main">
    <div class="item search">Search</div>
    <div class="item traffic">Traffic</div>
    <div class="item daily-traffic">Daily Traffic </div>
    <div class="item mobile-users">Mobile Users</div>
    <div class="item social-stats">Social Stats</div>
    <div class="item new-members">New Members</div>
    <div class="item recent-activity">Recent Activity</div>
    <div class="item message-user">Message User</div>
    <div class="item settings">Settings</div>
  </main>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script src="app.js"></script>
</body>
...