Блог

Я пытаюсь получить макет сетки на главной странице my Hugo вместо текущей версии stacked. Сообщения должны отображаться в сетке из 3 столбцов, а не один поверх другого. Для начала я завернул <article> тег list.html в <div class = "container"> :

 <div class="container">

<article class="{{ $class }}">
  {{- $isHidden := (.Site.Params.cover.hidden | default .Site.Params.cover.hiddenInList)}}
  {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}
  <header class="entry-header">
    <h2>
      {{ .Title }}
      {{- if .Draft }}<div class="entry-isdraft"><sup>amp;nbsp;amp;nbsp;[draft]</sup></div>{{- end }}
    </h2>
  </header>
  {{- if (ne .Site.Params.hideSummary true)}}
  <section class="entry-content">
    <p>{{ .Summary | plainify | htmlUnescape }}...</p>
  </section>
  {{- end }}
  <footer class="entry-footer">
    {{- partial "post_meta.html" . -}}
  </footer>
  <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
</article>
{{- end }}
</div>
 

Я просмотрел CSS-файлы темы и вижу, что карточки для сообщений оформлены по post-entry . В совокупности я добавил этот CSS в post-entry.css :

 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.post-entry {
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--entry);
    border-radius: var(--radius);
    transition: transform .1s
    width: 32%;
    padding-bottom: 32%; /* Same as width, sets height */
    margin-bottom: 2%; /* (100-32*3)/2 */
    position: relative;
}

 

Я думаю, что это то, что должно быть. Но это явно не работает. По какой-то причине ширина первого сообщения уменьшается, в то время как вторая запись-запись во всю ширину. Они не расположены рядом, как ожидалось, но все еще сложены: смотрите Изображение здесь

Мой репозиторий размещен здесь: https://github.com/thedivtagguy/archives если это будет более полезно.

Здесь находится живое развертывание: https://jolly-panini-82258b.netlify.app /

Глядя на ваш веб-сайт live deploy, я вижу две проблемы:

1. .container Класс используется для обертки вокруг всех сообщений и для второго сообщения в блоге «Привет, R Markdown». Это вызовет конфликты при правильном добавлении CSS.
2. Вы устанавливаете display: flex on .container , в то время как вы действительно хотите получить макет сетки в соответствии с вашим вопросом.

Проблему 2 легко решить (если у вас есть уникальный класс в качестве оболочки, это решит проблему 1), вы можете просто использовать display: grid вместе с grid-template-columns , чтобы использовать доступное пространство и разместить все элементы в сетке. Подробнее о grid-template-columns читайте в MDN.

 .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    margin-left: 80px;
    padding: 1px 16px;
}
 

• grid-template-columns: 1fr 2fr; : как элементы разделены на строку, fr означает фрагмент.
• grid-gap : пространство между каждым элементом.

Посмотрите на этот небольшой фрагмент в качестве отправной точки.

 .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

/* Only for demonstration purposes */
.post {
  background-color: #eee;
}

body {
  margin: 0;
  padding: 0;
} 

 <div class="container">
  <div class="post">
    <h2>This is Lorem</h2>
  </div>
  <div class="post">
    <h2>Hello R Markdown</h2>
  </div>
  <div class="post">
    <h2>This is Lorem</h2>
  </div>
</div> 

Я бы подошел к этому примерно так:

 .container {
  display: flex;
  flex-wrap: wrap;
}

.post-entry-content-wrapper {
  padding: 5px;
}

.post-entry {
  width: 33.33%;
  /* etc */
}
 

И тогда вы можете просто поиграть с интервалами.

Однако я вижу, что вы оборачиваете второй элемент .post-entry в другой элемент .container . Удалите второй элемент post-entry, чтобы второй элемент .container не мешал.

Редактировать

Чтобы обернуть строки, вы можете просто добавить flex-wrap: wrap; , как это было в вашем коде раньше.

Чтобы добавить некоторый интервал, я бы просто заключил запись в другой элемент и просто добавил немного отступов. Это вдохновлено BulmaCSS.

Однако, поскольку вы действительно пытаетесь создать сетку, вы можете также использовать display: grid , поскольку она предназначена для подобных случаев использования.