CSS Grid 筆記 19-Nesting Grid With Album Layouts

此篇介紹巢狀 grid 的佈置設定

Demo | Github

Nesting Grid with Album Layouts

使用的都是前幾篇提過的運用，需要注意的是圖片的寬度沒有設定的話，就會按照原本圖片大小顯示，會超出 grid 配置的欄位

所以只需要設定圖片寬度 100% 就會縮放大小至 grid 的大小

.albums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px , 1fr));
    grid-gap: 20px;
}

.album {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-gap: 10px;
    align-items: center;
}

.album__artwork{
    width: 100%;
}

線上展示

參考資料

• CSS-Grid 課程
• 作者 Wes Bos CSS-Grid Github
• 我的 CSS-Grid 練習Github