Home-theater-designers
CSS ofereix molta flexibilitat per dissenyar dissenys atractius i sensibles. Un disseny d'estil de revista organitza contingut mixt de text i imatge en un format atractiu i cridaner, el que el converteix en una opció popular.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
CSS Grid us ofereix les eines i el control detallat que necessiteu per aconseguir aquest disseny, de manera que és una tècnica fantàstica per aprendre.
Què són els dissenys d'estil de revista?
Els dissenys d'estil de revista utilitzen una estructura semblant a una quadrícula per organitzar el contingut en columnes i files.
Són ideals per mostrar diferents tipus de contingut com ara articles, imatges i anuncis d'una manera organitzada i atractiva.
Comprensió de CSS Grid
CSS Grid és una eina de disseny robusta que us permet posicionar els elements en l'espai bidimensional , fent-ho fàcil crear columnes i files .
Amb aquest tipus de disseny entren en joc dos components principals: el contenidor de quadrícula, encarregat de definir l'estructura de la quadrícula, i els elements de quadrícula, que són els elements fills del contenidor.
com cercar pel·lícules a Plutó TV
Aquí teniu un exemple senzill de com podeu utilitzar CSS Grid per crear una graella 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Aquest codi defineix un contenidor de quadrícula amb tres columnes de la mateixa amplada i un espai de 20 píxels entre els elements. Aquí teniu el resultat:
Configuració de l'estructura HTML
Per a un disseny d'estil de revista, necessitareu un document HTML ben estructurat. Considereu utilitzant elements semàntics per organitzar el contingut com
<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>
Definició del contenidor Grid
Per crear una quadrícula per al disseny de la vostra revista, afegiu el codi CSS següent:
.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;
}
Aquest CSS especifica que l'element contenidor, .maquetació de la revista , és un contenidor de graella que utilitza la declaració pantalla: quadrícula .
com eliminar Google Drive de Windows 10
Les propietats grid-template-columns i grid-template-files utilitzen una combinació de repetir , ajust automàtic , i mínmax . Això garanteix que les amplades de columnes i les alçades de les files siguin almenys 250 píxels , i en cadascun hi caben tants elements com sigui possible.
Col·locació d'elements de quadrícula
Ara dissenyeu cada article i el seu contingut per crear elements atractius d'estil en miniatura:
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;
}
En aquest punt, la vostra pàgina web hauria de tenir un aspecte com el següent:
Creació de dissenys a l'estil de revista
Per aconseguir un aspecte real d'estil de revista, afegiu estils CSS per abastar els elements de l'article en l'ordre que vulgueu:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Ara la vostra pàgina hauria de tenir aquest aspecte:
La sol·licitud descriptora del dispositiu USB del dispositiu USB desconegut de Windows 10 ha fallat
Disseny responsive amb quadrícula CSS
Un dels avantatges de CSS Grid és la seva capacitat de resposta inherent. Tu pots utilitzeu consultes multimèdia per ajustar el disseny per a diferents mides de pantalla. Per exemple:
/* 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;
}
}
Aquestes consultes multimèdia canvien entre diverses definicions de disseny per adaptar-se millor a la mida de la pantalla del dispositiu. El vostre disseny final s'adaptarà a diferents mides:
Transformant els vostres dissenys amb CSS Grid
CSS Grid és una eina flexible que podeu utilitzar per crear dissenys d'estil de revista que s'ajusten a diferents mides de pantalla. Us permet definir estructures de quadrícula, col·locar elements i ajustar dissenys.
Experimenteu amb diferents configuracions i estils de quadrícula per aconseguir el disseny perfecte inspirat en revistes per al vostre lloc web.