Home-theater-designers
CSS ger dig mycket flexibilitet för att designa tilltalande, lyhörda layouter. En layout i tidningsstil organiserar blandat text- och bildinnehåll i ett attraktivt, iögonfallande format, vilket gör det till ett populärt val.
Dagens video från MUO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL
CSS Grid ger dig verktygen och finkornig kontroll du behöver för att uppnå denna layout, så det är en fantastisk teknik att lära sig.
Vad är layouter i tidskriftsstil?
Tidskriftslayouter använder en rutnätsliknande struktur för att ordna innehåll i kolumner och rader.
De är utmärkta för att visa olika typer av innehåll som artiklar, bilder och annonser på ett organiserat och tilltalande sätt.
Förstå CSS Grid
CSS Grid är ett robust layoutverktyg som låter dig placera element i tvådimensionellt utrymme , vilket gör det enkelt att skapa kolumner och rader .
Med den här typen av layout spelar två primära komponenter in: rutnätsbehållaren, ansvarig för att definiera rutnätets struktur, och rutnätsobjekten, som är behållarens underordnade element.
Här är ett enkelt exempel på hur du kan använda CSS Grid för att skapa ett 3x3-rutnät:
hur man sätter en video som bakgrund
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Den här koden definierar en rutnätsbehållare med tre kolumner med samma bredd och ett 20px gap mellan objekt. Här är resultatet:
Konfigurera HTML-strukturen
För en layout i tidningsstil behöver du ett välstrukturerat HTML-dokument. Överväga använda semantiska element för att organisera ditt innehåll som
<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 rutnätsbehållaren
Lägg till följande CSS-kod för att skapa ett rutnät för din layout i tidningsstil:
.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;
}
Denna CSS anger att containerelementet, .tidningslayout , är en rutnätsbehållare som använder deklarationen display: rutnät .
Egenskaperna grid-template-columns och grid-template-rows använder en kombination av upprepa , automatisk passning , och min Max . Dessa säkerställer att kolumnbredder och radhöjder är minst 250 pixlar , och så många föremål som möjligt får plats i varje.
Placera rutnätsobjekt
Stil nu varje artikel och dess innehåll för att skapa attraktiva 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;
}
Vid det här laget bör din webbsida se ut ungefär så här:
Skapa layouter i tidskriftsstil
För att få ett äkta utseende i tidningsstil, lägg till CSS-stilar som spänner över artikelelementen i vilken ordning 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:
inget ljud i webbläsaren Windows 10
Responsiv design med CSS Grid
En av fördelarna med CSS Grid är dess inneboende lyhördhet. Du kan använd mediafrågor för att justera layouten för olika skärmstorlekar. Till exempel:
/* 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;
}
}
Dessa mediefrågor växlar mellan flera layoutdefinitioner för att bäst passa enhetens skärmstorlek. Din slutliga layout kommer att anpassas till olika storlekar:
Förvandla dina layouter med CSS Grid
CSS Grid är ett flexibelt verktyg som du kan använda för att skapa layouter i tidningsstil som anpassar sig till olika skärmstorlekar. Det låter dig definiera rutnätsstrukturer, placera objekt och justera layouter.
Experimentera med olika rutnätskonfigurationer och stilar för att uppnå den perfekta tidningsinspirerade layouten för din webbplats.