Dzięki kilku stylom możesz używać tego atrakcyjnego, elastycznego układu dla wielu typów treści strony.
CSS zapewnia dużą elastyczność w projektowaniu atrakcyjnych, responsywnych układów. Układ w stylu magazynu organizuje mieszaną treść tekstową i graficzną w atrakcyjnym, przyciągającym wzrok formacie, co czyni go popularnym wyborem.
CSS Grid zapewnia narzędzia i szczegółową kontrolę potrzebne do osiągnięcia tego układu, więc jest to świetna technika do nauki.
Jakie są układy w stylu magazynu?
Układy w stylu czasopism wykorzystują strukturę przypominającą siatkę do rozmieszczania treści w kolumnach i wierszach.
Świetnie nadają się do wyświetlania różnych typów treści, takich jak artykuły, obrazy i reklamy, w zorganizowany i atrakcyjny sposób.
Zrozumienie siatki CSS
CSS Grid to solidne narzędzie do projektowania układu, które pozwala na to położenie elementów w przestrzeni dwuwymiarowej, dzięki czemu jest to łatwe tworzyć kolumny i wiersze.
W przypadku tego typu układu w grę wchodzą dwa podstawowe komponenty: kontener siatki, odpowiedzialny za zdefiniowanie struktury siatki, oraz elementy siatki, które są elementami podrzędnymi kontenera.
Oto prosty przykład wykorzystania siatki CSS do utworzenia siatki 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Ten kod definiuje kontener siatki z trzema kolumnami o równej szerokości i odstępem 20 pikseli między elementami. Oto wynik:
Konfigurowanie struktury HTML
Aby uzyskać układ w stylu magazynu, potrzebujesz dobrze zorganizowanego dokumentu HTML. Rozważać używając elementów semantycznych do organizowania treści tak jak
<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>
Definiowanie kontenera siatki
Aby utworzyć siatkę układu w stylu magazynu, dodaj następujący kod 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;
}
Ten CSS określa, że element kontenera, układ-magazynu, jest kontenerem siatki korzystającym z deklaracji wyświetlacz: siatka.
Właściwości grid-template-columns i grid-template-rows wykorzystują kombinację powtarzać, automatyczne dopasowanie, I minimum maksimum. Zapewniają one co najmniej szerokość kolumn i wysokość wierszy 250 pikselii w każdym z nich zmieści się jak najwięcej elementów.
Umieszczanie elementów siatki
Teraz nadaj styl każdemu artykułowi i jego zawartości, aby utworzyć atrakcyjne elementy w stylu miniatury:
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;
}
W tym momencie Twoja strona internetowa powinna wyglądać mniej więcej tak:
Tworzenie układów w stylu magazynu
Aby uzyskać wygląd prawdziwego magazynu, dodaj style CSS, aby rozciągnąć elementy artykułu w dowolnej kolejności:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Twoja strona powinna teraz wyglądać tak:
Responsywny projekt z siatką CSS
Jedną z zalet CSS Grid jest jego wrodzona responsywność. Możesz użyj zapytań o media, aby dostosować układ dla różnych rozmiarów ekranu. Na przykład:
/* 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;
}
}
Te zapytania o media przełączają się między wieloma definicjami układu, aby najlepiej dopasować je do rozmiaru ekranu urządzenia. Ostateczny układ dostosuje się do różnych rozmiarów:
Przekształcanie układów za pomocą siatki CSS
CSS Grid to elastyczne narzędzie, którego można używać do tworzenia układów w stylu czasopism, które dostosowują się do różnych rozmiarów ekranu. Umożliwia definiowanie struktur siatki, umieszczanie elementów i dostosowywanie układów.
Eksperymentuj z różnymi konfiguracjami i stylami siatki, aby uzyskać idealny układ swojej witryny inspirowany czasopismami.