Witam,
Próbuje swoich sił w Gridzie.
Mam pewien pewnie prosty problem.
Jak wprowadzić podział w wykonanym już regionie - zakładam podział layotu na sekcje ( w tym przypadku muszę podzielić stopkę z 4 regionów na 2, zaś te 2 na kolejne.
Chciałem to wykonać poprzez dodanie diva w divie - poniżej code :
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item footer">
<div class="item footerleft">
<p>I'm the footer left</p>
</div>
</div>
</div>
</body>
<style>
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-rows: 445px auto auto 300px auto 445px;
grid-template-areas:
"o1 o1 o1 o1"
"o2m o2 o3 o3m"
"o23m o23 o32 o32m"
"o4 o4 o4 o4"
"o5m o5 o6 o6m"
"o7 o7 o7 o7"
.footer {
grid-area: o7;
background: linear-gradient(-45deg, #fe6b83, #9326f0);
}
</style>
</html>
Pytanie szczegółowe : stopka złożona jest z 4 regionów, w jaki sposób otrzymać możlwiośc umieszczenia treści w danym regionie - opcje start / stop nie chcą zbytnio działać...
Załóżmy że treść
<p>I'm the footer</p>
Umieścimy tak naprawdę w "o7 o7(2 kolumna) o7 o7"