Как я могу охватить несколько ячеек сетки, чтобы создать неправильный макет, используя только один класс (для модуля пост-подачи)? - PullRequest
Новая
       40

Как я могу охватить несколько ячеек сетки, чтобы создать неправильный макет, используя только один класс (для модуля пост-подачи)?

0 голосов
/ 07 февраля 2019

Я хочу стилизовать модуль пост-подачи (тема Divi), чтобы первый столбец имел ширину 50%, а остальные 7 - 25%, создавая сетку, подобную этой: https://www.screencast.com/t/GNJODhIG3

У меня естьэтот код CSS-сетки до сих пор, но я не могу найти способ отредактировать его, чтобы получить желаемый макет. 

.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(5, 18%);
    grid-column-gap: 2.5%;
}

Есть ли какой-нибудь код, который я мог бы добавить, например "column-one, row-one:50%; "

1 Ответ

0 голосов
/ 08 февраля 2019

С сеткой, если вы хотите разделить на n-столбцы, больше нет необходимости (и фактически является анти-паттерном) рассчитывать проценты самостоятельно, лучше использовать fr единицы, которые делят свободныепространство на дроби.Кроме того, то, что вы пытаетесь достичь, требует установки правила css, которое гласит: «Первый дочерний элемент контейнера должен занимать две строки».Пример возможного решения показан ниже: 

    .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 2.5%;
    grid-row-gap: 2.5%;
}
.container > :first-child {
  grid-column: 1 / 3;
}
.box {
  background-color: grey;

}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
...