De CSS Multi-column Layout-module is een krachtige tool waarmee u eenvoudig multi-column layouts voor uw webpagina's kunt maken. Door de opkomst van responsive design is het belangrijk om te begrijpen hoe je deze module moet gebruiken.
U kunt kolomeigenschappen gebruiken om flexibele en dynamische lay-outs te maken die zich aanpassen aan verschillende schermformaten.
Kolomnummer, breedte en tussenruimte specificeren
Om een geschikte lay-out met meerdere kolommen voor uw pagina-inhoud te maken, moet u beginnen met te beslissen hoeveel kolommen u wilt laten overspannen. Een van de belangrijkste eigenschappen in de Multi-column module is de kolom-telling eigenschap, die u gebruikt om het aantal kolommen in te stellen waarin de inhoud moet worden verdeeld.
Bijvoorbeeld:
.container {
kolom-telling: 3;
}
U kunt ook de breedte en tussenruimte van de kolommen specificeren. U kunt de waarde voor de kolombreedte instellen met een van de ondersteunde CSS-eenheden leuk vinden px, em, of %.
Als kolombreedte
ingesteld op auto, berekent de browser de breedte van elke kolom op basis van de kolom-telling eigenschap en de beschikbare ruimte binnen uw lay-out.Deze CSS verklaart bijvoorbeeld 3 kolommen, elk met een breedte van 200 pixels:
.container {
kolom-telling: 3;
kolombreedte: 200px;
}
De kolom-opening eigenschap specificeert de opening, of ruimte, tussen de kolommen in een lay-out met meerdere kolommen. Het stelt de grootte van de lege ruimtes tussen aangrenzende kolommen in en kan een lengtewaarde aannemen in pixels, ems of andere ondersteunde eenheden.
Bijvoorbeeld:
.container {
kolom-telling: 3;
kolom-opening: 20px; /* stelt de opening tussen kolommen in op 20 pixels */
}
Standaard is de waarde van kolom-opening ingesteld op normaal. Uw browser kiest deze waarde om een consistente afstand tussen de kolommen in uw lay-out te bereiken en toch visueel aantrekkelijk te blijven. Deze waarde kan ook variëren tussen browsers en kan ook afhangen van de lettergrootte, regelhoogte, positie eigenschap, en andere lay-outeigenschappen van de inhoud van de kolommen.
Ervoor zorgen dat de kolommen in balans zijn
CSS-kolommen proberen alle beschikbare ruimte binnen een lay-out op te vullen. Dit kan soms resulteren in kolommen met aanzienlijk verschillende hoogtes, waardoor de lay-out er ongelijk uitziet.
Om kolommen in evenwicht te brengen, moet u ervoor zorgen dat elke kolom in uw lay-out ongeveer dezelfde hoeveelheid inhoud heeft.
U kunt dit bereiken door de CSS in te stellen kolom vullen eigendom aan evenwicht. Een browser zal dan proberen de inhoud gelijkmatig over alle kolommen te verdelen, zodat ze ongeveer even hoog zijn.
De kolom vullen eigenschap is ingesteld op evenwicht standaard, maar een waarde van auto zal dit gedrag veranderen. Door automatisch te gebruiken, wordt de inhoud verdeeld over kolommen op basis van de beschikbare ruimte. Dit kan resulteren in een ongelijke afstand tussen kolommen en ongelijke kolomhoogten. Het kan zelfs een lay-out met lege kolommen produceren.
Hier is een voorbeeld van het gebruik van de kolom vullen eigenschap om kolommen te balanceren in een lay-out met meerdere kolommen:
.lay-out met meerdere kolommen {
kolom-telling: 3;
kolom-opening: 20px;
kolom vullen: evenwicht;
}
In dit voorbeeld hebben we een lay-out met meerdere kolommen met drie kolommen en een opening van 20 pixels tussen elke kolom. Door het instellen van de kolom vullen eigendom aan evenwicht, zorgen we ervoor dat de inhoud gelijkmatig over de kolommen wordt verdeeld, wat resulteert in evenwichtige kolomhoogten.
Het is belangrijk op te merken dat de kolom vullen eigenschap werkt mogelijk niet goed voor alle lay-outs en kan resulteren in een ongelijke afstand tussen kolommen. In dergelijke gevallen moet u mogelijk JavaScript gebruiken om de kolommen handmatig te balanceren. Vergeet niet om best practices te volgen en gebruik progressieve verbetering zodat u niet afhankelijk bent van JavaScript.
Alles samenvoegen
Je kunt alles wat je hebt geleerd over het implementeren van een lay-out met CSS-kolommen samenbrengen en gebruiken om een lay-out in tijdschriftstijl te maken.
Maak eerst de basis-HTML-structuur. Gebruik een containerelement om uw inhoud in te pakken en maak vervolgens verschillende onderliggende elementen die u vervolgens in kolommen kunt opmaken.
html>
<html>
<hoofd>
<koppelingrel="stijlblad"href="CSScolumns.css" />
hoofd>
<lichaam>
Containerelement
<divklas="tijdschrift-layout">Onderliggende elementen
<divklas="artikel">
<h2>Artikel titelh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Binnengekomen
magna vel lorem pharetra bibendum.P>
div><divklas="artikel">
<h2>Artikel titelh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Binnengekomen
magna vel lorem pharetra bibendum.P>
div><divklas="artikel">
<h2>Artikel titelh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Binnengekomen
magna vel lorem pharetra bibendum.P>
div>
div>
lichaam>
html>
Om een lay-out in tijdschriftstijl te maken met behulp van de CSS Multi-column-module, combineert u de kolom-telling, kolombreedte, kolom-opening, En kolom vullen eigenschappen:
.tijdschrift-layout {
kolom-telling: 3;
kolombreedte: 300px;
kolom-opening: 20px;
kolom vullen: evenwicht;
}
.artikel {
Achtergrond kleur: #f8f8f8;
grensradius: 4px;
doos-schaduw: 0 2px 4pxRGBA(0, 0, 0, 0.1);
opvulling: 10px;
inbraak: vermijd-kolom;
}
Dit voorbeeld definieert ook de inbraak pand op de .artikel klasse, met een waarde van vermijd-kolom. De eigenschap zorgt ervoor dat elk artikel binnen een enkele kolom blijft, in plaats van te splitsen over meerdere kolommen. Dit is hoe de lay-out eruit zou moeten zien:
Fallbacks gebruiken voor niet-ondersteunde browsers
Het is belangrijk op te merken dat de kolom-telling eigenschap wordt niet in alle browsers ondersteund. Browsers die dit niet ondersteunen kolom-telling, zal de inhoud in plaats daarvan in een enkele kolom weergeven.
Om terugvalstijlen te bieden voor niet-ondersteunde browsers, kunt u functiequery's zoals @ondersteunt om ondersteuning voor de te detecteren kolom-telling eigenschap en bieden alternatieve stijlen wanneer de eigenschap niet wordt ondersteund.
Bijvoorbeeld:
.container {
/* Fallback voor browsers die het aantal kolommen niet ondersteunen */
breedte: 100%;
}
/* Detecteer ondersteuning voor het aantal kolommen */
@ondersteunt (aantal kolommen:3) {
.container {
kolom-telling: 3;
}
}
In dit voorbeeld gebruiken we de @ondersteunt functiequery om ondersteuning voor de kolom-telling eigendom. Als de browser het aantal kolommen ondersteunt, is de container element wordt weergegeven in drie kolommen. Als de browser het aantal kolommen niet ondersteunt, wordt de inhoud in een enkele kolom weergegeven met behulp van de breedte eigendom.
Inhoud opsplitsen in kolommen
Over het algemeen bieden CSS-kolommen een praktische en krachtige manier om flexibele en responsieve lay-outs met meerdere kolommen te maken die de bruikbaarheid en gebruikerservaring van webinhoud verbeteren.
Door CSS-kolommen en JavaScript samen te gebruiken, kunt u nog geavanceerdere en dynamischere lay-outs maken die zich aanpassen aan verschillende gebruikersvoorkeuren en apparaatgroottes, waardoor uw webinhoud toegankelijker en aantrekkelijker wordt voor uw gebruikers.
