Killerclown
Gebruiker
- Lid geworden
- 30 dec 2007
- Berichten
- 181
Goeieavond,
Misschien een beetje een rare vraag.
Ik ben een webpagina aan het maken met een grid (container). Deze grid is opgedeeld in gridarea's (boxes)
Zoals je in de code hieronder ziet, zou ik heel wat boxes moeten maken. Ik zou er momenteel 186 moeten hebben (wat nog kan vermeerderen in de toekomst)
Bestaat er een manier om dit wat te vereenvoudigen, zodat ik niet 186 boxes moet definiëren?
Zowel in de CSS als in de HTML?
Hoe meer boxes, hoe meer rijen (grid-template-rows) ik ook nodig heb. Kan dit ook automatisch vermeerderen naargelang het aantal boxes?
Ook de grid-template-areas opbouw zou dan moeten groeien.
Is zoiets mogelijk in CSS?
CSS:
HTML:
Misschien een beetje een rare vraag.
Ik ben een webpagina aan het maken met een grid (container). Deze grid is opgedeeld in gridarea's (boxes)
Zoals je in de code hieronder ziet, zou ik heel wat boxes moeten maken. Ik zou er momenteel 186 moeten hebben (wat nog kan vermeerderen in de toekomst)
Bestaat er een manier om dit wat te vereenvoudigen, zodat ik niet 186 boxes moet definiëren?
Zowel in de CSS als in de HTML?
Hoe meer boxes, hoe meer rijen (grid-template-rows) ik ook nodig heb. Kan dit ook automatisch vermeerderen naargelang het aantal boxes?
Ook de grid-template-areas opbouw zou dan moeten groeien.
Is zoiets mogelijk in CSS?
CSS:
Code:
/* CONTAINER */
.container {
width: 80%;
padding: 15px;
text-align:center;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 3% 11% 11% 11% 11% 11% 11% 11% 11% 3%;
grid-template-rows: auto auto auto auto auto auto auto;
grid-gap: 5px 5px;
grid-template-areas:
". box01 box02 box03 box04 box05 box06 box07 box08 ."
". box09 box10 box11 box12 box13 box14 box15 box16 ."
". box17 box18 box19 box20 box21 box22 box23 box24 ."
". box25 box26 box27 box28 box29 box30 box31 box32 ."
". box33 box34 box35 box36 box37 box38 box39 box40 ."
". box41 box42 box43 box44 box45 box46 box47 box48 ."
". . . . top top . . . .";
}
.box {
padding: 20px;
size: 200px, 200px;
justify-content: center;
}
/*GRID AREAS */
.top {
grid-area: top;
}
.box01 { grid-area: box01;}
.box02 { grid-area: box02;}
.box03 { grid-area: box03;}
.box04 { grid-area: box04;}
.box05 { grid-area: box05;}
.box06 { grid-area: box06;}
.box07 { grid-area: box07;}
.box08 { grid-area: box08;}
.box09 { grid-area: box09;}
.box10 { grid-area: box10;}
.box11 { grid-area: box11;}
.box12 { grid-area: box12;}
.box13 { grid-area: box13;}
.box14 { grid-area: box14;}
.box15 { grid-area: box15;}
.box16 { grid-area: box16;}
.box17 { grid-area: box17;}
.box18 { grid-area: box18;}
.box19 { grid-area: box19;}
.box20 { grid-area: box20;}
.box21 { grid-area: box21;}
.box22 { grid-area: box22;}
.box23 { grid-area: box23;}
.box24 { grid-area: box24;}
.box25 { grid-area: box25;}
.box26 { grid-area: box26;}
.box27 { grid-area: box27;}
.box28 { grid-area: box28;}
.box29 { grid-area: box29;}
.box30 { grid-area: box30;}
.box31 { grid-area: box31;}
.box32 { grid-area: box32;}
.box33 { grid-area: box33;}
.box34 { grid-area: box34;}
.box35 { grid-area: box35;}
.box36 { grid-area: box36;}
.box37 { grid-area: box37;}
.box38 { grid-area: box38;}
.box39 { grid-area: box39;}
.box40 { grid-area: box40;}
.box41 { grid-area: box41;}
.box42 { grid-area: box42;}
.box43 { grid-area: box43;}
.box44 { grid-area: box44;}
.box45 { grid-area: box45;}
.box46 { grid-area: box46;}
.box47 { grid-area: box47;}
.box48 { grid-area: box48;}
HTML:
Code:
<div class="box22">
<!-- TemplateBeginEditable name="box22" -->
<!-- TemplateEndEditable -->
</div>
<div class="box23">
<!-- TemplateBeginEditable name="box23" -->
<!-- TemplateEndEditable -->
</div>
<div class="box24">
<!-- TemplateBeginEditable name="box24" -->
<!-- TemplateEndEditable -->
</div>
<div class="box25">
<!-- TemplateBeginEditable name="box25" -->
<!-- TemplateEndEditable -->
</div>
<div class="box26">
<!-- TemplateBeginEditable name="box26" -->
<!-- TemplateEndEditable -->
</div>