Con una manciata di stili, puoi utilizzare questo layout attraente e flessibile per molti tipi di contenuti della pagina.

I CSS offrono molta flessibilità per progettare layout accattivanti e reattivi. Un layout in stile rivista organizza contenuti misti di testo e immagini in un formato attraente e accattivante, rendendolo una scelta popolare.

CSS Grid ti offre gli strumenti e il controllo capillare di cui hai bisogno per ottenere questo layout, quindi è un'ottima tecnica da imparare.

Cosa sono i layout in stile rivista?

I layout in stile rivista utilizzano una struttura a griglia per organizzare il contenuto in colonne e righe.

Sono ottimi per visualizzare diversi tipi di contenuti come articoli, immagini e annunci in modo organizzato e accattivante.

Comprendere la griglia CSS

CSS Grid è un robusto strumento di layout che ti consente posizionare gli elementi nello spazio bidimensionale, rendendolo facile creare colonne e righe.

Con questo tipo di layout entrano in gioco due componenti principali: il contenitore della griglia, responsabile della definizione della struttura della griglia, e gli elementi della griglia, che sono gli elementi figli del contenitore.

instagram viewer

Ecco un semplice esempio di come puoi utilizzare CSS Grid per creare una griglia 3x3:

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

Questo codice definisce un contenitore della griglia con tre colonne di uguale larghezza e uno spazio di 20 px tra gli elementi. Ecco il risultato:

Impostazione della struttura HTML

Per un layout in stile rivista, avrai bisogno di un documento HTML ben strutturato. Prendere in considerazione utilizzando elementi semantici per organizzare i tuoi contenuti Piace

E
. Ecco un buon punto di partenza:

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

Definizione del contenitore della griglia

Per creare una griglia per il layout in stile rivista, aggiungi il seguente codice CSS:

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

Questo CSS specifica che l'elemento contenitore, .impaginazione-rivista, è un contenitore di griglia che utilizza la dichiarazione visualizzazione: griglia.

Le proprietà grid-template-columns e grid-template-rows utilizzano una combinazione di ripetere, adattamento automatico, E minimo Massimo. Ciò garantisce che le larghezze delle colonne e le altezze delle righe siano almeno 250pxe in ciascuno di essi può essere inserito il maggior numero possibile di elementi.

Posizionamento degli elementi della griglia

Ora modella ogni articolo e i suoi contenuti per creare accattivanti elementi in stile miniatura:

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

A questo punto, la tua pagina web dovrebbe assomigliare alla seguente:

Creazione di layout in stile rivista

Per ottenere un vero aspetto in stile rivista, aggiungi stili CSS per coprire gli elementi dell'articolo nell'ordine che desideri:

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

La tua pagina ora dovrebbe assomigliare a questa:

Design reattivo con griglia CSS

Uno dei vantaggi di CSS Grid è la sua reattività intrinseca. Puoi utilizzare le query multimediali per regolare il layout per diverse dimensioni dello schermo. Per esempio:

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

Queste query multimediali passano da una definizione all'altra di più layout per adattarsi al meglio alle dimensioni dello schermo del dispositivo. Il tuo layout finale si adatterà a diverse dimensioni:

Trasformare i tuoi layout con la griglia CSS

CSS Grid è uno strumento flessibile che puoi utilizzare per creare layout in stile rivista che si adattano alle diverse dimensioni dello schermo. Ti consente di definire strutture di griglia, posizionare elementi e regolare i layout.

Sperimenta diverse configurazioni e stili di griglia per ottenere il layout perfetto ispirato alle riviste per il tuo sito web.