Με μια χούφτα στυλ, μπορείτε να χρησιμοποιήσετε αυτήν την ελκυστική, ευέλικτη διάταξη για πολλούς τύπους περιεχομένου σελίδας.

Το CSS παρέχει μεγάλη ευελιξία για να σχεδιάζετε ελκυστικές, ανταποκρινόμενες διατάξεις. Μια διάταξη τύπου περιοδικού οργανώνει μεικτό περιεχόμενο κειμένου και εικόνας σε μια ελκυστική, εντυπωσιακή μορφή, καθιστώντας το μια δημοφιλή επιλογή.

Το CSS Grid σάς παρέχει τα εργαλεία και τον λεπτομερή έλεγχο που χρειάζεστε για να επιτύχετε αυτήν τη διάταξη, επομένως είναι μια εξαιρετική τεχνική για να μάθετε.

Τι είναι οι διατάξεις τύπου περιοδικού;

Οι διατάξεις τύπου περιοδικού χρησιμοποιούν μια δομή σαν πλέγμα για να τακτοποιήσουν το περιεχόμενο σε στήλες και σειρές.

Είναι εξαιρετικά για την εμφάνιση διαφορετικών τύπων περιεχομένου, όπως άρθρα, εικόνες και διαφημίσεις με οργανωμένο και ελκυστικό τρόπο.

Κατανόηση του Πλέγματος CSS

Το CSS Grid είναι ένα ισχυρό εργαλείο διάταξης που σας επιτρέπει θέση στοιχείων σε δισδιάστατο χώρο, καθιστώντας το εύκολο να δημιουργία στηλών και σειρών.

Με αυτόν τον τύπο διάταξης, δύο κύρια στοιχεία μπαίνουν στο παιχνίδι: το δοχείο πλέγματος, υπεύθυνο για τον καθορισμό της δομής του πλέγματος, και τα στοιχεία πλέγματος, τα οποία είναι τα θυγατρικά στοιχεία του κοντέινερ.

Ακολουθεί ένα απλό παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το CSS Grid για να δημιουργήσετε ένα πλέγμα 3x3:

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

Αυτός ο κώδικας ορίζει ένα κοντέινερ πλέγματος με τρεις στήλες ίσου πλάτους και ένα κενό 20 px μεταξύ των στοιχείων. Ιδού το αποτέλεσμα:

Ρύθμιση της δομής HTML

Για μια διάταξη τύπου περιοδικού, θα χρειαστείτε ένα καλά δομημένο έγγραφο HTML. Σκεφτείτε χρησιμοποιώντας σημασιολογικά στοιχεία για την οργάνωση του περιεχομένου σας αρέσει

και
. Εδώ είναι ένα καλό σημείο εκκίνησης:

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

Καθορισμός του κοντέινερ πλέγματος

Για να δημιουργήσετε ένα πλέγμα για τη διάταξη τύπου περιοδικού σας, προσθέστε τον ακόλουθο κώδικα 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;
}

Αυτό το CSS καθορίζει ότι το στοιχείο κοντέινερ, .περιοδικό-διάταξη, είναι ένα κοντέινερ πλέγματος που χρησιμοποιεί τη δήλωση οθόνη: πλέγμα.

Οι ιδιότητες πλέγμα-πρότυπο-στήλες και πλέγμα-πρότυπο-γραμμές χρησιμοποιούν έναν συνδυασμό επαναλαμβάνω, αυτόματη προσαρμογή, και ελάχιστη μέγ. Αυτά διασφαλίζουν ότι τα πλάτη στηλών και τα ύψη σειρών είναι τουλάχιστον 250 px, και όσο το δυνατόν περισσότερα αντικείμενα χωρούν στο καθένα.

Τοποθέτηση αντικειμένων πλέγματος

Τώρα στυλ κάθε άρθρου και των περιεχομένων του για να δημιουργήσετε ελκυστικά στοιχεία σε στυλ μικρογραφίας:

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

Σε αυτό το σημείο, η ιστοσελίδα σας θα πρέπει να μοιάζει με το εξής:

Δημιουργία διατάξεων σε στυλ περιοδικού

Για να επιτύχετε μια αληθινή εμφάνιση σε στυλ περιοδικού, προσθέστε στυλ CSS για να επεκτείνετε τα στοιχεία του άρθρου με όποια σειρά θέλετε:

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

Η σελίδα σας θα πρέπει τώρα να μοιάζει με αυτό:

Responsive Design με πλέγμα CSS

Ένα από τα πλεονεκτήματα του CSS Grid είναι η εγγενής ανταπόκρισή του. Μπορείς χρησιμοποιήστε ερωτήματα πολυμέσων για να προσαρμόσετε τη διάταξη για διαφορετικά μεγέθη οθόνης. Για παράδειγμα:

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

Αυτά τα ερωτήματα πολυμέσων εναλλάσσονται μεταξύ πολλών ορισμών διάταξης για να ταιριάζουν καλύτερα στο μέγεθος της οθόνης της συσκευής. Η τελική σας διάταξη θα προσαρμοστεί σε διαφορετικά μεγέθη:

Μεταμόρφωση των διατάξεων σας με το πλέγμα CSS

Το CSS Grid είναι ένα ευέλικτο εργαλείο που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε διατάξεις τύπου περιοδικού που προσαρμόζονται σε διαφορετικά μεγέθη οθόνης. Σας επιτρέπει να ορίζετε δομές πλέγματος, να τοποθετείτε στοιχεία και να προσαρμόζετε διατάξεις.

Πειραματιστείτε με διαφορετικές διαμορφώσεις πλέγματος και στυλ για να επιτύχετε την τέλεια διάταξη εμπνευσμένη από περιοδικά για τον ιστότοπό σας.