Zeer veel boxes in css vereenvoudigen?

Status
Niet open voor verdere reacties.

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:
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>
 
Heftig, bezig met named grid area's. Persoonlijk zou ik de display:flex kiezen omdat die meer cross browser is. Zo te zien is er in "pure css" geen oplossing op je vraag, het is de consequentie van "named" area's. Heb je de benaming echt nodig in je applicatie? Gevoelsmatig horen css grids op een hoger niveau in de html structuur (header, menu, article, enz).
 
Hmmm...mijn vrees wordt waarheid. Ik had al een vermoeden dat het niet ging gaan.

Eigenlijk wil ik volgende pagina herbouwen zodat het meer compatibel is voor mobile en tablets.
http://www.riddlebox.be/homepage/discography/discography_home.htm

Aangezien ik gelezen had dat je best geen tabellen gebruikt voor layout ben ik beginnen lezen en ben ik op grid uitgekomen.
Vandaar dat ik dus bij die pagina een grid wou bouwen maar het zijn inderdaad zeer veel grid-areas. Bestaan er andere oplossingen om zoiets op te lossen of blijf ik best bij mijn tabel? Maar die reageert dan niet zoals ik wil op mobile of tablet.
 
Laatst bewerkt:
Kan je het linkje in het vorige bericht aanpassen? Het begint met http://http//www.

Het is een misverstand dat je geen tabellen mag gebruiken. Voor een tabel (matrix met informatie, bijv. een prijslijst) mag je gerust een <table> gebruiken, echter voor de indeling van een pagina is het gebruik van tabellen iets uit de vorige eeuw ;) Velen onder ons proberen tabellen te vermijden omdat de html er uitziet als spaghetti.

Zelf werk ik met Bootstrap 4 (klik), dit werkt met display:flex voor de kolommen.

Je kan bij Bootstrap kiezen tussen alle Bootstrap css (bootstrap.min.css) OF alleen de normalize (bootstrap-reboot.min.css) samen met de grid (bootstrap-grid.min.css).

Je vindt hier (klik) de door BS4 ondersteunde browsers en hoe de grid eruit ziet vind je hier (klik). De responsive werking van het grid is 12x1 6x2 4x3 3x4 2x6 en 1x12 kolommen.
 
Laatst bewerkt:
Voorbeeld in de bijlage met @media(min-width). Kan je hier iets mee?
 

Bijlagen

  • grid2.zip
    892,6 KB · Weergaven: 17
Nice!! Daar moet ik zeker iets mee verder kunnen.
Ik probeer het even uit.
Is dit met Bootstrap gemaakt? Dit ziet er toch gewone CSS uit.

Ik heb Bootstrap even geprobeerd maar ik stak er wat tijd in om alles uit te pluizen en kwam uiteindelijk niet tot wat ik wou. Misschien moet ik mij er wat meer op toeleggen :)

Ps. de link in bovenstaand bericht is aangepast.
 
Is dit met Bootstrap gemaakt?
Nee, niet met Bootstrap gemaakt omdat de vraag niet complex was heb ik de meest eenvoudige oplossing gezocht.
Wel heb ik de @media(min-width ...) breakpoints overgenomen uit Bootstrap.

Bootstrap is gewoon css met het verschil dat er al een hoop css voor je is gemaakt. Dan hoef je zelf minder css te schrijven en je website wordt beter cross-browser. En wereldwijd is er veel support, internet staat vol met Bootstrap oplossingen en templates.

In de bijlage hetzelfde voorbeeld maar dan met Bootstrap.

edit: verander 'index.php' even in 'index.html' want je gebruikt html bestanden zie ik.
 

Bijlagen

  • grid3.zip
    892,5 KB · Weergaven: 20
Laatst bewerkt:
Ik heb jouw voorbeeld geïmplementeerd in mijn design en het ziet er uit hoe ik het wou en het reageert ook hoe ik het wou.
Zeer veel dank!! Eigenlijk zo'n simpele oplossing en ik zat maar met grids te puzzelen en boxes te maken.
Soms zoek ik het misschien wat te ver :)

Misschien moet ik mij eens wat toeleggen op Bootstrap.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan