Aşağıdaki görseldeki gibi bir şablon oluşturdum. Tüm kutucukların altına yani tüm ekranı google maps koymak istiyorum. z-index vermeme rağmen olmadı yardımcı olursanız sevinirim.
HTML
Sunum
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
CSS
html, body, .grid-container { height: 100%; margin: 0; }
.grid-container * {
position: relative;
}
.grid-container *:after {
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "map map map map map" "map map map map map" "map map map map map" "map map map map map";
}
#map {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 0.5fr 1fr 1fr 1fr;
grid-template-areas: "logo-left . . . logo-right" "left-side . . . right-side" "left-side . . . right-side" "left-side bottom-side bottom-side bottom-side right-side";
grid-area: map;
}
.left-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a" "b" "c";
grid-area: left-side;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.right-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "d" "e" "f";
grid-area: right-side;
}
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.bottom-side {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "b1 b2";
grid-area: bottom-side;
}
.b1 { grid-area: b1; }
.b2 { grid-area: b2; }
.logo-left { grid-area: logo-left; }
.logo-right { grid-area: logo-right; }
