Używanie siatki CSS do układów w stylu magazynu

Spis treści:

CSS oferuje szerokie możliwości w kreowaniu estetycznych i adaptacyjnych projektów stron internetowych. Szczególnie popularny jest układ inspirowany magazynami, który łączy tekst i grafikę w sposób atrakcyjny i przyciągający uwagę.

Technologia CSS Grid dostarcza narzędzi i precyzyjnej kontroli niezbędnej do uzyskania tego rodzaju aranżacji, czyniąc ją doskonałym wyborem do nauki.

Jak definiować układy w stylu magazynu?

Układy w stylu magazynów wykorzystują strukturę siatki do rozmieszczania zawartości w kolumnach i wierszach.

Doskonale sprawdzają się przy prezentacji różnorodnych treści, takich jak artykuły, ilustracje i reklamy, w zorganizowanej i atrakcyjnej formie.

Zrozumienie zasad działania siatki CSS

CSS Grid to potężny mechanizm layoutu, który pozwala na rozmieszczanie elementów w przestrzeni dwuwymiarowej, ułatwiając tworzenie kolumn i wierszy.

Podstawowe komponenty tego typu układu to: kontener siatki, który definiuje całą strukturę, oraz elementy siatki, czyli elementy podrzędne umieszczone wewnątrz kontenera.

Poniżej znajduje się prosty przykład, jak za pomocą CSS Grid utworzyć siatkę o wymiarach 3×3:

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

Ten kod określa kontener siatki z trzema kolumnami o identycznej szerokości, z 20-pikselowym odstępem między elementami. Efekt widoczny jest poniżej:

Konfiguracja struktury HTML

Do uzyskania układu w stylu magazynu potrzebna jest przejrzysta struktura HTML. Warto zastosować elementy semantyczne, jak np.

, aby odpowiednio uporządkować treść. Oto proponowany szkielet:

 <body>
    <section class="uklad-magazynu">
        <article>
            <img src="https://source.unsplash.com/random/?city,night" />
            <p>Tytuł artykułu</p>
        </article>        <article> 
            <img src="https://source.unsplash.com/random/?city,day" />
            <p>Tytuł artykułu</p>
        </article>
        <article> 
            <img src="https://source.unsplash.com/random/?animal" />
            <p>Tytuł artykułu</p>
        </article>
        <article>
            <img src="https://source.unsplash.com/random/?book" />
            <p>Tytuł artykułu</p>
        </article>
        <article>
            <img src="https://source.unsplash.com/random/?food" />
            <p>Tytuł artykułu</p>
        </article>
    </section>
</body>

Definiowanie kontenera siatki

Aby stworzyć siatkę układu w stylu magazynu, dodaj poniższy kod CSS:

 .uklad-magazynu {
    height: 100%;
    max-width: 130rem;
    margin: 0 auto;    
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    
    grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

Ten kod CSS ustala, że element kontenera o klasie „.uklad-magazynu” jest kontenerem siatki, poprzez deklarację `display: grid`.

Właściwości `grid-template-columns` i `grid-template-rows` wykorzystują kombinację `repeat`, `auto-fit` oraz `minmax`. Zapewniają one, że szerokość kolumn i wysokość wierszy wynoszą minimum 250 pikseli i że w każdej zmieści się maksymalna liczba elementów.

Umieszczanie elementów siatki

Teraz nadaj wygląd każdemu artykułowi i jego zawartości, by uzyskać atrakcyjne elementy w stylu miniaturek:

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

Na tym etapie witryna powinna prezentować się mniej więcej w ten sposób:

Tworzenie układów w stylu magazynu

Aby uzyskać prawdziwy wygląd 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ć następująco:

Responsywny projekt z wykorzystaniem CSS Grid

Jedną z zalet CSS Grid jest jego naturalna responsywność. Za pomocą zapytań medialnych można dostosować układ do różnych rozmiarów ekranu. Przykładowo:

 
@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 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 medialne przełączają się między różnymi definicjami układu, by najlepiej dopasować je do wielkości ekranu urządzenia. Ostateczny układ będzie więc adaptować się do różnych rozmiarów.

Transformacja layoutów dzięki CSS Grid

CSS Grid to elastyczne narzędzie, które można wykorzystać do tworzenia układów w stylu magazynów, adaptujących się do różnych wielkości ekranu. Umożliwia definiowanie struktur siatki, rozmieszczanie elementów i dynamiczną zmianę układu.

Zachęcamy do eksperymentowania z różnymi konfiguracjami i stylami siatki, by uzyskać idealny, inspirowany magazynami wygląd strony.