Voit käyttää tätä houkuttelevaa ja joustavaa asettelua useiden erityyppisten sivujen sisällössä.
CSS tarjoaa runsaasti joustavuutta houkuttelevien, reagoivien asettelujen suunnitteluun. Aikakauslehtityylinen asettelu järjestää tekstin ja kuvan sekasisällön houkuttelevassa, katseenvangitsijassa muodossa, mikä tekee siitä suositun valinnan.
CSS Grid tarjoaa työkalut ja hienorakeisen hallinnan, joita tarvitset tämän asettelun saavuttamiseen, joten se on loistava tekniikka oppia.
Mitä ovat aikakauslehtityyppiset asettelut?
Aikakauslehtityyliset asettelut käyttävät ruudukkomaista rakennetta sisällön järjestämiseen sarakkeiksi ja riveiksi.
Ne sopivat erinomaisesti erityyppisen sisällön, kuten artikkeleiden, kuvien ja mainosten näyttämiseen järjestetyllä ja houkuttelevalla tavalla.
CSS-ruudukon ymmärtäminen
CSS Grid on vankka asettelutyökalu, jonka avulla voit sijoittaa elementtejä kaksiulotteiseen tilaan, mikä tekee siitä helppoa luoda sarakkeita ja rivejä.
Tämän tyyppisessä asettelussa kaksi ensisijaista komponenttia tulevat peliin: ruudukkosäiliö, joka vastaa ruudukon rakenteen määrittämisestä, ja ruudukkoelementit, jotka ovat säiliön alielementtejä.
Tässä on yksinkertainen esimerkki siitä, kuinka voit luoda 3x3-ruudukon CSS-ruudukon avulla:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Tämä koodi määrittelee ruudukkosäiliön, jossa on kolme samanleveää saraketta ja 20 kuvapisteen väli kohteiden välillä. Tässä tulos:
HTML-rakenteen määrittäminen
Aikakauslehtityyppistä asettelua varten tarvitset hyvin jäsennellyn HTML-dokumentin. Harkitse käyttämällä semanttisia elementtejä sisällön järjestämiseen Kuten
<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>
Ruudukkosäiliön määrittäminen
Luo ruudukko aikakauslehtityyppiselle asettelulle lisäämällä seuraava CSS-koodi:
.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;
}
Tämä CSS määrittää, että säilöelementti, .magazine-layout, on ilmoitusta käyttävä ruudukkosäiliö näyttö: ruudukko.
Grid-template-columns- ja grid-template-rows-ominaisuudet käyttävät yhdistelmää toistaa, automaattinen sovitus, ja minmax. Nämä varmistavat, että sarakkeiden leveydet ja rivien korkeudet ovat vähintään 250 pikseliä, ja jokaiseen mahtuu mahdollisimman monta esinettä.
Ruudukkokohteiden sijoittaminen
Muotoile nyt jokainen artikkeli ja sen sisältö houkuttelevien pikkukuvatyylisten elementtien luomiseksi:
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;
}
Tässä vaiheessa verkkosivusi pitäisi näyttää tältä:
Aikakauslehtityyppisten asettelujen luominen
Saavutaksesi todellisen aikakauslehtityylinen ulkoasu lisäämällä CSS-tyylejä, jotka kattavat artikkelielementit haluamassasi järjestyksessä:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Sivusi pitäisi nyt näyttää tältä:
Responsiivinen muotoilu CSS-ruudukolla
Yksi CSS Gridin eduista on sen luontainen reagointikyky. Sinä pystyt käytä mediakyselyitä asettelun säätämiseen erikokoisille näytöille. Esimerkiksi:
/* 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;
}
}
Nämä mediakyselyt vaihtavat useiden asettelumääritelmien välillä laitteen näytön kokoon parhaiten sopivaksi. Lopullinen asettelusi mukautuu eri kokoihin:
Asettelujen muuttaminen CSS-ruudukon avulla
CSS Grid on joustava työkalu, jonka avulla voit luoda aikakauslehtimäisiä asetteluja, jotka mukautuvat eri näyttökokoihin. Sen avulla voit määrittää ruudukkorakenteita, sijoittaa kohteita ja säätää asetteluja.
Kokeile erilaisia ruudukkokokoonpanoja ja tyylejä saavuttaaksesi täydellinen aikakauslehtien inspiroima ulkoasu verkkosivustollesi.
