Korzystanie z siatki CSS dla układów w stylu czasopisma
CSS zapewnia dużą elastyczność w projektowaniu atrakcyjnych, responsywnych układów. Układ w stylu czasopisma organizuje mieszaną zawartość tekstowo-obrazkową w atrakcyjnym, przyciągającym wzrok formacie, co czyni go popularnym wyborem.
CSS Grid zapewnia programistom szereg narzędzi i skomplikowany poziom kontroli niezbędny do stworzenia takiego układu, dzięki czemu jest to cenny zestaw umiejętności do zdobycia.
Czym są układy w stylu czasopisma?
Układy w stylu czasopisma wykorzystują system siatki do organizowania treści w kolumnach i wierszach, nadając projektowi uporządkowany wygląd.
Nasze innowacyjne szablony doskonale prezentują różnorodne media, takie jak tekst, obrazy i reklamy, w uporządkowany i przyjemny wizualnie sposób.
Zrozumienie CSS Grid
CSS Grid to zaawansowane rozwiązanie układu, które umożliwia użytkownikom łatwe rozmieszczanie elementów w dwuwymiarowej płaszczyźnie, ułatwiając tworzenie struktur kolumnowych, a także formacji wierszy dzięki potężnym możliwościom organizacji przestrzennej.
kontener siatki, który ustanawia ramy siatki, oraz elementy siatki, które służą jako potomstwo wspomnianego kontenera.
Oczywiście, oto elegancka demonstracja tego, jak można wykorzystać CSS Grid do wygenerowania układu siatki 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Niniejszy kod tworzy układ oparty na siatce, składający się z trzech poziomych sekcji, z których każda ma identyczną szerokość i charakteryzuje się spójnym odstępem dwudziestu pikseli między sąsiednimi elementami. Poniżej przedstawiono wizualizację:
Konfigurowanie struktury HTML
Aby uzyskać projekt podobny do publikacji, konieczne jest posiadanie zorganizowanej struktury HTML. Jedno z podejść polega na wykorzystaniu znaczników semantycznych, takich jak i do strukturyzacji treści. Odpowiednią podstawę można znaleźć w poniższym przykładzie:
<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>
Definiowanie kontenera siatki
Aby zbudować siatkę w celu uzyskania wyglądu przypominającego czasopismo, należy zastosować następującą stylizację 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;
}
grid". Właściwości grid-template-columns i grid-template-rows wykorzystują kombinację powtarzania, automatycznej zmiany rozmiaru i ograniczeń minimalnych/maksymalnych, aby zagwarantować, że szerokość kolumn i wysokość wierszy wynosi nie mniej niż 250 pikseli, przy jednoczesnym uwzględnieniu jak największej liczby elementów w każdym odpowiednim wymiarze.
Umieszczanie elementów siatki
Rozważ zwiększenie atrakcyjności wizualnej artykułów poprzez przekształcenie ich w przyciągające wzrok, miniaturowe reprezentacje znane jako miniatury.
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;
}
Rzeczywiście, po zakończeniu kroków opisanych powyżej, strona internetowa powinna mieć wygląd podobny do poniższego:
Creating Magazine-Style Layouts
Aby uzyskać prawdziwy wygląd przypominający czasopismo, wykorzystaj stylizację CSS do rozmieszczenia elementów artykułu zgodnie z życzeniem:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Twoja strona powinna teraz wyglądać następująco:
Responsive Design With CSS Grid
Jedną z zalet korzystania z CSS Grid jest jego wewnętrzna zdolność adaptacji, ponieważ pozwala projektantom i programistom na stosowanie zapytań o media w celu modyfikacji układu elementów w oparciu o różne wymiary ekranu. Wdrażając taką funkcję, można zapewnić, że zawartość witryny pozostanie atrakcyjna wizualnie i przyjazna dla użytkownika na wielu urządzeniach o różnych możliwościach wyświetlania.
/* 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;
}
}
Wspomniane zapytania o media wykorzystują różne konfiguracje układu, które są zoptymalizowane pod kątem różnych wymiarów ekranu, zapewniając w ten sposób responsywność i kompatybilność projektu z różnymi urządzeniami.
Twoja przeglądarka nie obsługuje tagu wideo.
Przekształcanie układów za pomocą CSS Grid
Wykorzystanie CSS Grid pozwala na tworzenie adaptacyjnych, inspirowanych czasopismami układów, które płynnie dostosowują się do różnych wymiarów ekranu. To wszechstronne narzędzie umożliwia użytkownikom tworzenie systemów siatki, pozycjonowanie elementów i modyfikowanie układów z łatwością.
Poznaj różne układy siatki i estetykę, aby stworzyć idealny, inspirowany publikacjami projekt dla swojej obecności w Internecie.