Выравнивание столбцов сетки

Я пытаюсь создать шаблон блога. section#header сделан с использованием flexbox. section.main сделан на css grid.

Проблема с div.most-read (я изменил цвет на красный). Я ожидал, что под div.ad он будет 20 пикселей (интервал сетки), однако он оказался чуть ниже ожидаемого места. Что не так? Есть идеи по общему улучшению кода? P.S. не может публиковать сообщения из-за недостатка слов, поэтому Lorem ipsum dolor sit amet ,conctetur adipisicing elit. Molestiae, saepe.

См. Код ниже:

:root {
  --light-dark: #333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}

a {
  text-decoration: none !important;
}

body {
  background-color: var(--main-bg);
}

ul {
  list-style: none;
  display: flex;
}

header {
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav a {
  font-size: 1.5em;
  color: var(--light-dark);
}

.nav li {
  padding-right: 1em;
}

.nav li:last-child {
  padding-right: 0;
}

.tags {
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}

.tags ul {
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

.tags li {
  padding-right: 10px;
}

.tags a {
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}

.tags a:hover {
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

#main>* {
  background-color: var(--section-bg);
}

.latest {
  height: 80em;
  grid-column: 1 /4;
}

.ad {
  height: 25em;
  grid-column: 4 / 5;
}

.most-read {
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}

<!--Header-->
<section id = "header">
  <header>
    <h1>Blog</h1>
    <ul class = "nav">
      <li><a href = "#">anchor</a></li>
      <li><a href = "#">anchor</a></li>
      <li><a href = "#">anchor</a></li>
    </ul>
  </header>
  <div class = "tags">
    <ul>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id = "main">
  <div class = "latest">
  </div>
  <div class = "ad"></div>
  <div class = "most-read"></div>
</section>

html css css-grid

20.07.2018 18:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

сетка рисуется строки за строками и столбцы за столбцами, чтобы позволить .most-read подняться вверх, вам действительно нужно, чтобы .latest охватил как минимум 2 строки, чтобы включить 2 элемента в сторону (2 строки).

можете добавить : grid-row: 1 / span 2; или grid-row: auto / span 2; в .latest

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
#main > *{
  background-color: var(--section-bg);
}
.latest{
  height: 80em;
  grid-column: 1 /4;
  grid-row: 1 / span 2;
}
.ad{
  height: 25em;
  grid-column: 4 / 5;
}
.most-read{
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <!--CSS-->
  <link rel = "stylesheet" href = "/style.css">
  <!--Google Fonts-->
  <link href = "https://fonts.googleapis.com/css?family=Arimo" rel = "stylesheet">
  <title>Document</title>
</head>
<body>
  <!--Header-->
  <section id = "header">
    <header>
      <h1>Blog</h1>
      <ul class = "nav">
        <li><a href = "#">anchor</a></li>
        <li><a href = "#">anchor</a></li>
        <li><a href = "#">anchor</a></li>
      </ul>
    </header>
  <div class = "tags">
    <ul>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id = "main">
  <div class = "latest">
  </div>
  <div class = "ad"></div>
  <div class = "most-read"></div>
</section>
</body>
</html>

Легкое напоминание о сетке https://css-tricks.com/snippets/css/complete-guide-grid/

Это сработало нормально, но я обнаружил, что grid-template-areas тоже работает, и мне это легче понять. Плохая практика - использовать сетку-шаблон-области?

— 20.07.2018 21:28

@patlatka совсем нет, в основном важно использовать вещи наиболее эффективным способом, скажем, мой ответ действительно был не так: grid-area был способ сделать здесь, если вы используете grid-template-areas

— 20.07.2018 22:32

20.07.2018 20:16

Вы упускаете из виду одно из замечательных преимуществ CSS Grid: ширина и высота элементов сетки могут быть определены на уровне контейнера. Вам не нужно устанавливать высоту на уровне элемента (как с flexbox).

Ваш самый высокий предмет установлен на 80em. В другом столбце для одного элемента установлено значение 25em, а для другого - 55em.

Итак, создайте сетку из 20 рядов высотой 5em каждый. Затем установите области сетки.

Это будет выглядеть так:

(Визуализация с использованием Инструмент наложения Firefox.)

Вот скорректированный CSS:

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;      /* new */
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;       /* new */
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;      /* new */
  grid-column: 4 / 5;
  background-color: red !important;
}

демонстрация jsFiddle

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
#main > * {
  background-color: var(--section-bg);
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;
  grid-column: 4 / 5;
  background-color: red !important;
}

<section id = "header">
    <header>
      <h1>Blog</h1>
      <ul class = "nav">
        <li><a href = "#">anchor</a></li>
        <li><a href = "#">anchor</a></li>
        <li><a href = "#">anchor</a></li>
      </ul>
    </header>
  <div class = "tags">
    <ul>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
      <li><a href = "">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id = "main">
  <div class = "latest">
  </div>
  <div class = "ad"></div>
  <div class = "most-read"></div>
</section>

Каковы реальные преимущества этого?

— 21.07.2018 08:45

Централизованное управление. Более легкое обслуживание. Повышенная точность и гибкость. Вероятно, больше преимуществ, особенно при работе с большим количеством предметов.

— 21.07.2018 13:08

20.07.2018 23:45