Как избежать двойного разрыва сетки, когда элемент сетки свернут в мобильном представлении

Question

Я создаю макет сайта с использованием CSS-сетки, и я почти получил его именно так, как хотел бы, но у меня есть одна проблема:

Мой рабочий стол выглядит так, как я хочу, но когда он сворачивается до представления мобильного размера (все элементы в отдельных строках), мои leftPad и rightPad деления вызывают double grid-gap как показано ниже:

Код можно посмотреть здесь: https://codepen.io/nickmask/pen/BbxNoE

.container {
  display: grid;

  grid-template-areas:
    "nav nav nav nav nav"
    "header header header header header"
    "leftPad leftSidebar content rightSidebar rightPad"
    "footer footer footer footer footer";

  grid-template-columns: auto 200px minmax(auto, 600px) 200px auto;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

body {
  margin: 0;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "nav"
      "header"
      "leftPad"
      "leftSidebar"
      "content"
      "rightSidebar"
      "rightPad"
      "footer";

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Nav */
      auto /* Header */
      auto /* Left Pad */
      minmax(75px, auto) /* Left Sidebar */
      1fr /* Content */
      minmax(75px, auto) /* Right Sidebar */
      auto /* Right Pad */
      auto; /* Footer */
  }

  nav,
  aside {
    margin: 0;
  }
}

header {
  grid-area: header;
  background-color: aqua;
}

nav {
  grid-area: nav;
  background-color: lightblue;
}

main {
  grid-area: content;
}

.leftSidebar {
  background-color: aliceblue;
  grid-area: leftSidebar;
}

.rightSidebar {
  background-color: aliceblue;
  grid-area: rightSidebar;
}

footer {
  grid-area: footer;
  height: 100px;
  background-color: lightcoral;
}

    <div class="container">
      <nav>
        <!-- Navigation -->
        Nav
      </nav>
      <header>
        Header
      </header>
      <div class="leftPad"></div>
      <aside class="leftSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      <main>
        <!-- Main content -->
        Main content
      </main>
      <aside class="rightSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      <div class="rightPad"></div>
      <footer>
        Footer
        <!-- Footer content -->
      </footer>
    </div>
>

Есть ли какие-то обходные пути или предложения о том, как я мог бы построить этот макет по-другому? Ура!

Answer 1

Проблема в ваших leftPad и rightPad - вы можете удалить их, а затем изменить grid-template-areas:

grid-template-areas:
    "nav nav nav nav nav"
    "header header header header header"
    ". leftSidebar content rightSidebar ."
    "footer footer footer footer footer";

Обратите внимание на точек в приведенном выше определении. В мобильном представлении просто опустите их.

Однако вы можете оставить пустыми ячейки сетки с этим метод верстки. Чтобы оставить ячейку пустой, используйте символ полной остановки, ''.

MDN

См. Демо ниже:

.container {
  display: grid;

  grid-template-areas:
    "nav nav nav nav nav"
    "header header header header header"
    ". leftSidebar content rightSidebar ."
    "footer footer footer footer footer"; /* CHANGED */

  grid-template-columns: auto 200px minmax(auto, 600px) 200px auto;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

body {
  margin: 0;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "nav"
      "header"
      "leftSidebar"
      "content"
      "rightSidebar"
      "footer"; /* CHANGED */

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Nav */
      auto /* Header */
      minmax(75px, auto) /* Left Sidebar */
      1fr /* Content */
      minmax(75px, auto) /* Right Sidebar */
      auto; /* Footer */
  } /* CHANGED */

  nav,
  aside {
    margin: 0;
  }
}

header {
  grid-area: header;
  background-color: aqua;
}

nav {
  grid-area: nav;
  background-color: lightblue;
}

main {
  grid-area: content;
}

.leftSidebar {
  background-color: aliceblue;
  grid-area: leftSidebar;
}

.rightSidebar {
  background-color: aliceblue;
  grid-area: rightSidebar;
}

footer {
  grid-area: footer;
  height: 100px;
  background-color: lightcoral;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <div class="container">
      <nav>
        <!-- Navigation -->
        Nav
      </nav>
      <header>
        Header
      </header>
      
      <aside class="leftSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      <main>
        <!-- Main content -->
        Main content
      </main>
      <aside class="rightSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      
      <footer>
        Footer
        <!-- Footer content -->
      </footer>
    </div>
  </body>
</html>

Answer 2

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

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

.container {
  display: grid;
  grid-template-columns: auto 200px minmax(auto, 600px) 200px auto;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 10px;
  min-height: 100vh; /*better use min-height to avoid overflow on small screen */
}

@media (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  /*this will replace the gap*/
  .container>*:not(:last-child) {
    margin-bottom: 10px;
  }
}

header,
nav,
footer {
  grid-column: 1/-1;
  /*take whole line*/
}

main {
  grid-column: 3;
  flex-grow: 1; /*will replace 1fr on small screen*/
}

.leftSidebar,
.rightSidebar {
  min-height: 75px;
  background-color: aliceblue;
}

.leftSidebar {
  grid-column: 2;
}

.rightSidebar {
  grid-column: 4;
}

footer {
  height: 100px;
  background-color: lightcoral;
}

header {
  background-color: aqua;
}

nav {
  background-color: lightblue;
}

body {
  margin: 0;
}

<div class="container">
  <nav>
    <!-- Navigation -->
    Nav
  </nav>
  <header>
    Header
  </header>
  <aside class="leftSidebar">
    <!-- Sidebar / Ads -->
    Side bar
  </aside>
  <main>
    <!-- Main content -->
    Main content
  </main>
  <aside class="rightSidebar">
    <!-- Sidebar / Ads -->
    Side bar
  </aside>
  <footer>
    Footer
    <!-- Footer content -->
  </footer>
</div>