Создание сетки масонства в WordPress - PullRequest
Новая
       27

Создание сетки масонства в WordPress

0 голосов
/ 10 мая 2019

Я хочу внедрить кладочную сетку на домашней странице моего сайта, которая включает 4 изображения.

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

Я приложил изображение, чтобы показать вам ниже.

Я строю свой веб-сайт в Wordpress, используя конструктор страниц WPBakery, но я не могу найти способ достичь того, что я естьищу.

Есть ли другие плагины, которые могут мне помочь?Как мне лучше всего этого достичь?

Спасибо enter image description here

1 Ответ

1 голос
/ 10 мая 2019

Попробуйте CSS сетку, которая дает вам это:

enter image description here

.wrapper {
    display: grid;
    grid-gap: 10px;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        background-color: #fff;
        color: #444;
}

.box {
    background: none;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

.a {
    background-image: url(http://placehold.it/200x400);
    grid-column: 1;
		grid-row: 1/3;
	}

.b {
    background-image: url(http://placehold.it/400x200);
    grid-column:  2 / span 2;
    grid-row: 1;
}

.c {
    background-image: url(http://placehold.it/200x200);
    grid-column: 2;
    grid-row: 2;
 }

 .d {
    background-image: url(http://placehold.it/200x200);
    grid-column: 3;
    grid-row: 2;
}
<div class="wrapper">
      <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
    </div>
...