после создания сообщения в блоге (состоящего из нескольких абзацев и нескольких изображений) в NetlifyCMS при проверке HTML / CSS сообщения шаблон генерирует следующую разметку:
.post {
&__header {
width: calc(100% + var(--space) * 2);
margin-left: calc(var(--space) * -1);
margin-top: calc(var(--space) * -1);
margin-bottom: calc(var(--space) / 2);
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
img {
width: 100%;
}
&:empty {
display: none;
}
}
&__content {
h2:first-child {
margin-top: 0;
}
p:first-of-type {
font-size: 1.2em;
background-color: blue;
color: var(--title-color);
}
img {
width: calc(100% + var(--space) * 2);
margin-left: calc(var(--space) * -1);
display: block;
max-width: none;
}
}
}
<div class="post__content">
<p>first paragraph.</p>
<p>second paragraph.</p>
<p>third paragraph.</p>
<p>fourth paragraph.</p>
<p><img src='image1path.jpg'></p>
<p><img src='image2path.jpg'></p>
<p><img src='image3path.jpg'></p>
<p><img src='image4path.jpg'></p>
<p><img src='image5path.jpg'></p>
</div>
Фотографии имеют ширину 100% и отображаются в виде блоков. Что было бы наилучшим подходом для размещения изображений в формате flexbox или сетки? - напишите несколько javascript, чтобы добавить классы в теги p и img с помощью setAttribute, затем добавьте css? - Создать собственный виджет NetlifyCMS? - Создать собственный плагин фотогалереи Gridsome? - или еще какой вариант? Это проще, чем я думаю?