Använda CSS Grid för layouter i tidskriftsstil
CSS ger dig massor av flexibilitet för att designa tilltalande, responsiva layouter. En layout i magasinstil organiserar blandat text- och bildinnehåll i ett attraktivt, iögonfallande format, vilket gör det till ett populärt val.
CSS Grid ger utvecklare en rad instrument och en detaljerad kontrollnivå som krävs för att skapa en sådan layout, vilket gör det till en värdefull färdighet att förvärva.
Vad är layouter i tidskriftsstil?
Layouter i magasinstil använder ett rutnätssystem för att organisera innehåll i kolumner och rader, vilket ger designen ett ordnat utseende.
Våra innovativa mallar är utmärkta för att presentera en mängd olika medier som text, visuella bilder och annonser på ett strukturerat och visuellt tilltalande sätt.
Förstå CSS Grid
CSS Grid är en avancerad layoutlösning som gör det enkelt för användare att arrangera element inom ett tvådimensionellt plan, vilket underlättar skapandet av kolumnstrukturer samt radformationer genom dess kraftfulla rumsliga organisationsfunktioner.
gridcontainern, som skapar ramarna för gridden, och gridobjekten, som fungerar som avkommor till den ovannämnda containern.
Här är en elegant demonstration av hur man kan använda CSS Grid för att skapa en 3x3 gridlayout:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Den aktuella koden konstruerar en rutnätsbaserad layout som består av tre horisontella sektioner, var och en med identisk bredd och med ett konsekvent mellanrum på tjugo pixlar mellan intilliggande element. Den efterföljande visualiseringen visas nedan:
Konfigurera HTML-strukturen
För att uppnå en publikationsliknande design är det viktigt att ha en organiserad HTML-struktur. Ett tillvägagångssätt är att använda semantiskt meningsfulla taggar som och för att strukturera innehållet. En lämplig grund kan hittas i exemplet nedan:
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</article>
</section>
</body>
Definiera Grid Container
För att skapa ett grid som ger din layout ett tidskriftsliknande utseende ska du använda följande CSS-styling:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;
/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
grid".
Egenskaperna grid-template-columns och grid-template-rows använder en kombination av repetition, automatisk storleksändring och minimum/maximum begränsningar för att garantera att kolumnbredder och radhöjder inte mäter mindre än 250 pixlar samtidigt som så många element som möjligt ryms inom varje respektive dimension.
Placera rutnätsobjekt
Överväg att förbättra det visuella intrycket av artiklar genom att omvandla dem till iögonfallande miniatyrbilder som kallas miniatyrbilder.
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
Efter att ha slutfört de steg som beskrivs ovan bör ens webbplats se ut ungefär som följande:
Skapa layouter i tidskriftsstil
För att få ett riktigt tidskriftsliknande utseende använder du CSS-styling för att arrangera artikelelementen som du vill:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Din sida bör nu se ut så här:
Responsiv design med CSS Grid
En av fördelarna med att använda CSS Grid är dess inneboende anpassningsförmåga, eftersom det tillåter designers och utvecklare att använda media queries för att ändra arrangemanget av element baserat på varierande skärmdimensioner. Genom att implementera en sådan funktion kan man se till att webbplatsens innehåll förblir visuellt tilltalande och användarvänligt på en rad olika enheter med olika visningsfunktioner.
/* Media query for screens up to 1100px */
@media screen and (max-width: 1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}
.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width: 600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
De ovannämnda mediafrågorna använder en mängd olika layoutkonfigurationer som är optimerade för olika skärmdimensioner, vilket säkerställer att din design är responsiv och kompatibel med olika enheter.
Din webbläsare stöder inte videotaggen.
Förvandla dina layouter med CSS Grid
Genom att använda CSS Grid kan du skapa anpassningsbara, tidskriftsinspirerade layouter som sömlöst anpassar sig till olika skärmdimensioner. Detta mångsidiga verktyg gör det enkelt att skapa rutnätssystem, positionera element och ändra arrangemang.
Utforska olika rutnätsarrangemang och estetik för att skapa en idealisk, publikationsinfluerad design för din närvaro på nätet.