Leaderboard – FESA ONE

Layout 1
Ini adalah Layout standar pada Elementor, tidak perlu kode khusus pada tampilan tata letak ini.

Layout 2
Ini adalah Layout Grid untuk Elementor, perlu kode khusus pada tampilan tata letak ini.

				
					selector .elementor-column-gap-default > div {
min-height: 140px;
}

@media screen and (max-width: 767px) {
selector .elementor-column-gap-default > div {
min-height: 95px;
}
}

selector .elementor-column-gap-default {
display: grid;
grid-auto-rows: initial;
}

selector
.elementor-column-gap-default
> .elementor-column {
width: initial;
}

Flexbox 3
Ini Diplay Flex Bukan Grid

				
					selector {
padding: 0px 10px;
}

selector .elementor-column-gap-default {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

selector .box1 {
width: 30%;
}

selector .box2,
selector .box3,
selector .box6 {
width: 69%;
}

selector .box4,
selector .box5 {
width: 30%;
}

Grid Layout 4
Grid dengan 4 kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

				
					@media screen and (min-width: 1025px) {
selector .elementor-column-gap-default {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: initial;
}

selector .box1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
position: relative;
}

selector .box2 {
grid-column-start: 4;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
position: relative;
}

selector
.elementor-column-gap-default
> .elementor-column {
width: initial;
}
}

Grid Layout 5
Dalam contoh berikutnya, saya membuat tata letak yang sama menggunakan Grid. Kali ini kita memiliki enam kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

				
					selector .elementor-column-gap-default {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: initial;
}

selector .box1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
position: relative;
}

selector .box2 {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 1;
position: relative;
}

selector .box3 {
grid-column-start: 1;
grid-column-end: 4;
position: relative;
}

selector .box5 {
grid-column-start: 4;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 2;
}


selector .box6 {
grid-column-start: 2;
grid-column-end: 4;
position: relative;
}

selector
.elementor-column-gap-default
> .elementor-column {
width: initial;
}

Grid Layout 6
Dalam contoh berikutnya, saya membuat tata letak yang sama menggunakan Grid. Kali ini kita memiliki enam kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

Layout 1 Ini adalah Layout standar pada Elementor, tidak perlu kode khusus pada tampilan tata letak ini.

Layout 2 Ini adalah Layout Grid untuk Elementor, perlu kode khusus pada tampilan tata letak ini.

Flexbox 3 Ini Diplay Flex Bukan Grid

Grid Layout 4 Grid dengan 4 kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

Grid Layout 5 Dalam contoh berikutnya, saya membuat tata letak yang sama menggunakan Grid. Kali ini kita memiliki enam kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

Grid Layout 6 Dalam contoh berikutnya, saya membuat tata letak yang sama menggunakan Grid. Kali ini kita memiliki enam kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

Layout 1
Ini adalah Layout standar pada Elementor, tidak perlu kode khusus pada tampilan tata letak ini.

Layout 2
Ini adalah Layout Grid untuk Elementor, perlu kode khusus pada tampilan tata letak ini.

Flexbox 3
Ini Diplay Flex Bukan Grid

Grid Layout 4
Grid dengan 4 kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

Grid Layout 5
Dalam contoh berikutnya, saya membuat tata letak yang sama menggunakan Grid. Kali ini kita memiliki enam kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.

Grid Layout 6
Dalam contoh berikutnya, saya membuat tata letak yang sama menggunakan Grid. Kali ini kita memiliki enam kolom. Kita tidak perlu mengatur apapun pada item itu sendiri.