CSS Multi-column Layout-modulen är ett kraftfullt verktyg som låter dig enkelt skapa flerkolumnslayouter för dina webbsidor. Framväxten av responsiv design betyder att det är viktigt att förstå hur man använder den här modulen.
Du kan använda kolumnegenskaper för att skapa flexibla och dynamiska layouter som anpassar sig till olika skärmstorlekar.
Ange kolumnnummer, bredd och mellanrum
För att skapa en lämplig layout med flera kolumner för ditt sidinnehåll bör du börja med att bestämma hur många kolumner du vill att det ska sträcka sig över. En av de viktigaste egenskaperna i Multi-column-modulen är kolumnantal egenskap, som du använder för att ställa in antalet kolumner att dela upp innehållet i.
Till exempel:
.behållare {
kolumnantal: 3;
}
Du kan också ange spalternas bredd och mellanrum. Du kan ställa in kolumnbreddsvärdet med någon av de CSS-enheter som stöds tycka om px, em, eller %.
Om kolumnbredd är satt till bil, kommer webbläsaren att beräkna bredden på varje kolumn baserat på kolumnantal fastighet och det tillgängliga utrymmet i din layout.
Till exempel deklarerar denna CSS 3 kolumner, var och en med en bredd av 200 pixlar:
.behållare {
kolumnantal: 3;
kolumnbredd: 200px;
}
De kolumn-gap egenskapen anger mellanrummet, eller utrymmet, mellan kolumnerna i en layout med flera kolumner. Det kommer att ställa in storleken på de tomma tomma utrymmena mellan intilliggande kolumner och kan ta ett längdvärde i pixlar, ems eller andra enheter som stöds.
Till exempel:
.behållare {
kolumnantal: 3;
kolumn-gap: 20px; /* ställer in gapet mellan kolumner till 20 pixlar */
}
Som standard är värdet på kolumn-gap är satt till vanligt. Din webbläsare väljer detta värde för att uppnå konsekvent avstånd mellan kolumner i din layout samtidigt som den förblir visuellt tilltalande. Detta värde kan också variera mellan webbläsare och kan också bero på teckenstorlek, radhöjd, position egendom, och andra layoutegenskaper för innehållet i kolumnerna.
Se till att kolumner balanserar
CSS-kolumner försöker fylla upp allt tillgängligt utrymme i en layout. Detta kan ibland resultera i kolumner som har betydligt olika höjder, vilket gör att layouten ser ojämn ut.
För att balansera kolumner bör du se till att varje kolumn i din layout har ungefär samma mängd innehåll.
Du kan uppnå detta genom att ställa in CSS kolumnfyllning egendom till balans. En webbläsare kommer sedan att försöka fördela innehållet jämnt över alla kolumner så att de har ungefär samma höjd.
De kolumnfyllning egenskapen är inställd på balans som standard, men ett värde på bil kommer att ändra detta beteende. Genom att använda auto distribueras innehållet över kolumner baserat på tillgängligt utrymme. Detta kan resultera i ojämna avstånd mellan kolumner och ojämna kolumnhöjder. Det kan till och med skapa en layout med tomma kolumner.
Här är ett exempel på hur man använder kolumnfyllning egenskap för att balansera kolumner i en layout med flera kolumner:
.multi-column-layout {
kolumnantal: 3;
kolumn-gap: 20px;
kolumnfyllning: balans;
}
I det här exemplet har vi en layout med flera kolumner med tre kolumner och ett mellanrum på 20 pixlar mellan varje kolumn. Genom att ställa in kolumnfyllning egendom till balans, ser vi till att innehållet fördelar sig jämnt över kolumnerna, vilket resulterar i balanserade kolumnhöjder.
Det är viktigt att notera att kolumnfyllning egenskapen kanske inte fungerar bra för alla layouter och kan resultera i ojämnt avstånd mellan kolumner. I sådana fall kan du behöva använda JavaScript för att manuellt balansera kolumnerna. Kom ihåg att följa bästa praxis och använd progressiv förbättring så att du inte litar på JavaScript.
Få alltid att falla på plats
Du kan samla allt du har lärt dig om att implementera en layout med CSS-kolumner och använda den för att skapa en layout i tidningsstil.
Skapa först den grundläggande HTML-strukturen. Använd ett containerelement för att omsluta ditt innehåll och skapa sedan flera underordnade element som du sedan kan layouta i kolumner.
html>
<html>
<huvud>
<länkrel="stilmall"href="CSScolumns.css" />
huvud>
<kropp>
Behållarelement
<divklass="tidningslayout">Barnelement
<divklass="artikel">
<h2>Artikelrubrikh2><sid>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.sid>
div><divklass="artikel">
<h2>Artikelrubrikh2><sid>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.sid>
div><divklass="artikel">
<h2>Artikelrubrikh2><sid>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.sid>
div>
div>
kropp>
html>
För att skapa en layout i tidningsstil med CSS Multi-column-modulen, kombinera kolumnantal, kolumnbredd, kolumn-gap, och kolumnfyllning egenskaper:
.tidningslayout {
kolumnantal: 3;
kolumnbredd: 300px;
kolumn-gap: 20px;
kolumnfyllning: balans;
}
.artikel {
bakgrundsfärg: #f8f8f8;
gräns-radie: 4px;
box-skugga: 0 2px 4pxrgba(0, 0, 0, 0.1);
stoppning: 10px;
inbrott: undvik-kolumn;
}
Detta exempel definierar också inbrott egendom på .artikel klass, med ett värde av undvik-kolumn. Egenskapen säkerställer att varje artikel stannar i en enda kolumn, istället för att delas upp i flera kolumner. Så här ska layouten se ut:
Använda reservdelar för webbläsare som inte stöds
Det är viktigt att notera att kolumnantal egenskapen stöds inte i alla webbläsare. Webbläsare som inte stöder kolumnantal, visar innehållet i en enda kolumn istället.
För att tillhandahålla reservstilar för webbläsare som inte stöds kan du använda funktionsfrågor som @stödjer för att upptäcka stöd för kolumnantal egendom och tillhandahålla alternativa stilar när egenskapen inte stöds.
Till exempel:
.behållare {
/* Reserv för webbläsare som inte stöder kolumnantal */
bredd: 100%;
}
/* Upptäck stöd för kolumnantal */
@stödjer (kolumnantal:3) {
.behållare {
kolumnantal: 3;
}
}
I det här exemplet använder vi @stödjer funktionsfråga för att upptäcka stöd för kolumnantal fast egendom. Om webbläsaren stöder kolumnräkning, behållare elementet visas i tre kolumner. Om webbläsaren inte stöder kolumnräkning kommer den att visa innehållet i en enda kolumn med hjälp av bredd fast egendom.
Dela upp innehåll i kolumner
Sammantaget ger CSS-kolumner ett praktiskt och kraftfullt sätt att skapa flexibla och lyhörda layouter med flera kolumner som förbättrar användbarheten och användarupplevelsen av webbinnehåll.
Genom att använda CSS-kolumner och JavaScript tillsammans kan du skapa ännu mer sofistikerade och dynamiska layouter som anpassar sig till olika användarpreferenser och enhetsstorlekar, vilket gör ditt webbinnehåll mer tillgängligt och engagerande för dina användare.
