Naudodami keletą stilių galite naudoti šį patrauklų, lankstų išdėstymą daugelio tipų puslapių turiniui.

CSS suteikia daug lankstumo kuriant patrauklius, reaguojančius maketus. Žurnalo stiliaus išdėstymas organizuoja mišrų teksto ir vaizdo turinį patraukliu, akį traukiančiu formatu, todėl tai yra populiarus pasirinkimas.

CSS tinklelis suteikia jums įrankius ir tikslią valdymą, kurių reikia norint pasiekti šį išdėstymą, todėl tai yra puiki mokymosi technika.

Kas yra žurnalo stiliaus maketai?

Žurnalo stiliaus maketuose naudojama tinklelį primenanti struktūra turiniui išdėstyti stulpeliuose ir eilutėse.

Jie puikiai tinka organizuotai ir patraukliai rodyti įvairių tipų turinį, pvz., straipsnius, vaizdus ir skelbimus.

CSS tinklelio supratimas

CSS Grid yra patikimas išdėstymo įrankis, leidžiantis padėties elementai dvimatėje erdvėje, todėl lengva sukurti stulpelius ir eilutes.

Naudojant šio tipo išdėstymą, naudojami du pagrindiniai komponentai: tinklelio talpykla, atsakinga už tinklelio struktūros apibrėžimą, ir tinklelio elementai, kurie yra antriniai konteinerio elementai.

instagram viewer

Štai paprastas pavyzdys, kaip galite naudoti CSS tinklelį, kad sukurtumėte 3x3 tinklelį:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}

Šis kodas apibrėžia tinklelio talpyklą su trimis vienodo pločio stulpeliais ir 20 pikselių tarpu tarp elementų. Štai rezultatas:

HTML struktūros nustatymas

Norėdami sukurti žurnalo stiliaus maketą, jums reikės geros struktūros HTML dokumento. Apsvarstykite naudojant semantinius elementus turiniui tvarkyti Kaip

ir
. Štai geras atspirties taškas:

<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>

Tinklelio konteinerio apibrėžimas

Norėdami sukurti tinklelį žurnalo stiliaus maketui, pridėkite šį CSS kodą:

.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;
}

Šis CSS nurodo, kad konteinerio elementas, .žurnalas-išdėstymas, yra tinklelio talpykla, naudojanti deklaraciją ekranas: tinklelis.

Tinklelio šablono stulpeliai ir tinklelio šablono eilučių savybės naudoja derinį kartoti, automatinis pritaikymas, ir minmax. Tai užtikrina, kad stulpelių plotis ir eilučių aukštis būtų bent jau 250 piks, o kiekviename telpa kuo daugiau daiktų.

Tinklelio elementų išdėstymas

Dabar sukurkite kiekvieno straipsnio ir jo turinio stilių, kad sukurtumėte patrauklius miniatiūros elementus:

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;
}

Šiuo metu jūsų tinklalapis turėtų atrodyti maždaug taip:

Žurnalo stiliaus maketų kūrimas

Norėdami sukurti tikrą žurnalo stiliaus išvaizdą, pridėkite CSS stilių, kad apimtų straipsnio elementus bet kokia pageidaujama tvarka:

.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}

Dabar jūsų puslapis turėtų atrodyti taip:

Reaktyvus dizainas su CSS tinkleliu

Vienas iš CSS Grid privalumų yra jai būdingas reagavimas. Tu gali naudokite medijos užklausas išdėstymui koreguoti skirtingų dydžių ekranams. Pavyzdžiui:

/* 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;
 }
}

Šios medijos užklausos perjungia kelis išdėstymo apibrėžimus, kad geriausiai atitiktų įrenginio ekrano dydį. Jūsų galutinis išdėstymas prisitaikys prie skirtingų dydžių:

Savo maketų transformavimas naudojant CSS tinklelį

CSS tinklelis yra lankstus įrankis, kurį galite naudoti kurdami žurnalo stiliaus maketus, prisitaikančius prie skirtingų ekrano dydžių. Tai leidžia apibrėžti tinklelio struktūras, sudėti elementus ir koreguoti maketus.

Eksperimentuokite su skirtingomis tinklelio konfigūracijomis ir stiliais, kad sukurtumėte tobulą žurnalų įkvėptą svetainės išdėstymą.