Egy maroknyi stílussal ezt a vonzó, rugalmas elrendezést sokféle oldaltartalomhoz használhatja.
A CSS rengeteg rugalmasságot biztosít a tetszetős, reszponzív elrendezések tervezésében. A magazin-stílusú elrendezés vonzó, szemet gyönyörködtető formátumba rendezi a vegyes szöveges és képi tartalmat, így népszerű választás.
A CSS Grid biztosítja az ehhez az elrendezéshez szükséges eszközöket és precíz vezérlést, így ez egy nagyszerű technika a tanuláshoz.
Mik azok a magazin stílusú elrendezések?
A magazin stílusú elrendezések rácsszerű szerkezetet használnak a tartalom oszlopokba és sorokba rendezéséhez.
Kiválóan alkalmasak különféle típusú tartalmak, például cikkek, képek és hirdetések rendezett és vonzó megjelenítésére.
A CSS Grid megértése
A CSS Grid egy robusztus elrendezési eszköz, amely lehetővé teszi helyzetelemek kétdimenziós térben, ami megkönnyíti hozzon létre oszlopokat és sorokat.
Az ilyen típusú elrendezésnél két elsődleges komponens lép működésbe: a rács tárolója, amely a rács szerkezetének meghatározásáért felelős, és a rácselemek, amelyek a tároló gyermekelemei.
Íme egy egyszerű példa arra, hogyan hozhat létre 3x3-as rácsot a CSS-rács segítségével:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Ez a kód egy rácstárolót határoz meg három egyenlő szélességű oszloppal, és 20 képpontos hézaggal az elemek között. Íme az eredmény:
A HTML-struktúra beállítása
A magazin stílusú elrendezéshez egy jól strukturált HTML-dokumentumra lesz szüksége. Fontolgat szemantikai elemek használatával a tartalom rendszerezéséhez mint
<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>
A Grid Container meghatározása
Ha rácsot szeretne létrehozni magazinszerű elrendezéséhez, adja hozzá a következő CSS-kódot:
.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;
}
Ez a CSS meghatározza, hogy a tárolóelem, .magazin-layout, a deklarációt használó rácstároló kijelző: rács.
A grid-template-columns és grid-template-rows tulajdonságok kombinációját használják ismétlés, automatikus illeszkedés, és minimum maximum. Ezek biztosítják, hogy az oszlopszélesség és a sormagasság legalább legyen 250 képpont, és a lehető legtöbb elem elfér mindegyikben.
Rácselemek elhelyezése
Most stílusozzon minden cikket és azok tartalmát vonzó miniatűr stílusú elemek létrehozásához:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
Ezen a ponton a weboldala a következőképpen néz ki:
Magazin-stílusú elrendezések készítése
A valódi magazin-stílusú megjelenés eléréséhez adjon hozzá CSS-stílusokat, amelyek tetszőleges sorrendben fedik le a cikkelemeket:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Az oldalának most így kell kinéznie:
Reszponzív kialakítás CSS ráccsal
A CSS Grid egyik előnye a benne rejlő válaszkészség. tudsz használjon médialekérdezéseket az elrendezés módosításához különböző képernyőméretekhez. Például:
/* 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;
}
}
Ezek a médialekérdezések több elrendezés-definíció között váltanak, hogy a legjobban megfeleljenek az eszköz képernyőjének méretének. A végső elrendezés a különböző méretekhez igazodik:
Az elrendezések átalakítása CSS-rács segítségével
A CSS Grid egy rugalmas eszköz, amellyel magazinszerű elrendezéseket hozhat létre, amelyek a különböző képernyőméretekhez igazodnak. Lehetővé teszi rácsszerkezetek meghatározását, elemek elhelyezését és elrendezések beállítását.
Kísérletezzen különböző rácskonfigurációkkal és stílusokkal, hogy tökéletes, magazinok által ihletett elrendezést érjen el webhelye számára.
