CSS столбцов шаблона сетки - как это работает? - PullRequest
Новая
       7

CSS столбцов шаблона сетки - как это работает?

1 голос
/ 06 февраля 2020

Я новичок в CSS Сетка и пытаюсь узнать, как она работает. Я нашел макет, с которым поиграл, но не могу понять, как заставить статью охватывать всю ширину нижнего колонтитула / заголовка. Я попытался изменить grid-template-columns, но и приблизился к нему, но не до конца.

Любые советы будут с благодарностью! 

.grid {
  display: grid;
  grid-template-columns: 150px auto 0px;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / 4;
}

@media all and (max-width: 800px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}


/* Demo Specific Styles */

body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
aside,
article,
footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh;
}

header {
  height: 250px;
}
<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <footer>
    Footer
  </footer>
</div>

1 Ответ

1 голос
/ 06 февраля 2020

Я не могу понять, как заставить статью охватывать всю ширину нижнего колонтитула / заголовка.

Вы создали сетку из 3 столбцов: 

grid-template-columns: 150px auto 0px

Вы установили верхний и нижний колонтитулы так, чтобы они охватывали все три столбца: 

header, footer {
  grid-column: 1 / 4;
}

Однако в статье нет таких инструкций. Он просто расширяется по второму столбцу, потому что это настройка по умолчанию (т. Е. grid-column { 2 / auto }).

Поэтому вам нужно указать статье расшириться до третьего столбца. Добавьте это к своему коду: 

article {
   grid-column: 2 / 4;
}


.grid {
  display: grid;
  grid-template-columns: 150px auto 0px;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / 4;
}


/* new */
article {
  grid-column: 2 / 4;
}

@media all and (max-width: 800px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}


/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
aside,
article,
footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh;
}

header {
  height: 250px;
}
<div class="grid">
  <header>Header</header>
  <aside class="sidebar-left">Left Sidebar</aside>
  <article>Article</article>
  <footer>Footer</footer>
</div>
...