使用 CSS 網格進行雜誌風格的佈局

Leonard Strauss included in Programming Web Design Css Html

2023-10-13 285 words 2 minutes

Contents

CSS 為您提供了足夠的靈活性來設計吸引人的響應式佈局。雜誌風格的佈局以有吸引力、引人注目的格式組織混合的文字和圖像內容，使其成為流行的選擇。

CSS 網格為開發人員提供了創建此類佈局所需的一系列工具和複雜的控制級別，使其成為一項寶貴的技能組合。

什麼是雜誌風格佈局?

雜誌風格的佈局採用網格系統來組織列和行中的內容，為設計提供有序的外觀。

我們的創新模板擅長以結構化且視覺上令人愉悅的方式呈現各種媒體，例如文字、視覺圖像和廣告。

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

本程式碼建構了一個基於網格的佈局，包括三個水平部分，每個部分跨越相同的寬度，並具有相鄰元素之間一致的二十個像素的間隙。隨後的可視化如下所示:

設定 HTML 結構

為了實現類似出版物的設計，有組織的 HTML 結構至關重要。一種方法涉及利用語義上有意義的標籤，例如「」和「」來建立內容。可以在下面提供的範例中找到合適的基礎:

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

定義網格容器

若要建立網格以使佈局實現類似雜誌的外觀，請合併以下 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-template-columns 和 grid-template-rows 屬性採用重複、自動調整大小和最小/最大約束的組合，以確保列寬和行高不小於 250 像素，同時容納盡可能多的元素在各個維度內盡可能可行。

放置網格項目

考慮透過將文章轉換為引人注目的微型表示形式（稱為縮圖）來增強文章的視覺吸引力。

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

事實上，完成上述步驟後，網站應該會呈現類似以下的外觀:

創建雜誌風格的佈局

要獲得真正的雜誌般的外觀，請使用 CSS 樣式根據需要排列文章元素:

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

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

您的頁面現在應如下所示:

使用 CSS 網格的響應式設計

利用 CSS 網格的好處之一是其固有的適應性，因為它允許設計人員和開發人員使用媒體查詢來根據不同的螢幕尺寸修改元素的排列。透過實施這樣的功能，人們可以確保其網站內容在一系列具有不同顯示功能的裝置上保持視覺吸引力和使用者友善性。

 /* 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 網格可以創建自適應的、受雜誌啟發的佈局，無縫適應各種螢幕尺寸。這種多功能工具使用戶能夠輕鬆建立網格系統、定位元素並修改排列。

探索各種網格排列和美學，為您的線上形象創建理想的、受出版物影響的設計。