元素CSS網不換

漂亮的新進入網絡的發展，我想學習如何使用CSS美麗網格工具，但實際上，我堅持這一點：

我希望我的卡到下一行（與同列模板）中自動流一個接一個，但我實際上只看到在我的瀏覽器一卡。

我想這個問題是我在vh.wrapper高度。我試過px和%，但我真的堅持找到解決方案。

，如果有人有關於我對這個問題的想法，或任何評論我真的會喜歡（壞...還是不錯的？）編碼的方法！

/* Just some horrible stylization to better see boxes */ 
 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background-color: #f1c40f; 
 
    border: 1px solid white; 
 
} 
 

 
/* Definition of the 3 grids used*/ 
 

 
.wrapper { 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
    display: grid; 
 
    align-content: stretch; 
 
    justify-content: stretch; 
 
    grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr; 
 
    grid-template-rows: 1fr 5fr 1fr; 
 
    grid-template-areas: "header header header header header header header" 
 
         "main main main main main main main" 
 
         "footer footer footer footer footer footer footer" 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    display: grid; 
 
    grid-template-columns: 60px 7fr 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-template-areas: "sidebar box-content box-content"; 
 
} 
 

 
/* This box-content's grid-template-columns have many ones, it is done to modify 
 
only the grid-template-areas with media-queries for larger screen*/ 
 

 
.box-content { 
 
    grid-area: box-content; 
 
    display: grid; 
 
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr; 
 
    grid-template-rows: 1fr 7fr 1fr; 
 
    grid-auto-flow: row; 
 
    grid-template-areas: ". . . . . . . . ." 
 
         ". card card card card card card card." 
 
         ". . . . . . . . ."; 
 
} 
 

 
/* Definition of the different element's grid-area*/ 
 

 
.header { 
 
    grid-area: header; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
} 
 

 

 
.card { 
 
    grid-area: card; 
 
} 
 

 
.footer { 
 
    grid-area: footer; 
 
}

<!-- I apologize for non-semantic tags, only a quick prototyping --> 
 

 
    <div class="wrapper"> 
 
    <div class="header"> Header Header Header Header Header</div> 
 
    <div class="main"> 
 
     <div class="sidebar">Sidebar Sidebar </div> 
 
     <div class="box-content"> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> Footer Footer Footer Footer Footer </div> 
 
    </div>

謝謝

來源

2017-09-03 Halkeand

對於你的卡包，行由行，使用auto-fit和minmax功能。

這裏有一個充分的解釋：Getting columns to wrap in CSS Grid

這是一個基本的演示：jsFiddle（重新大小的瀏覽器的寬度，查看效果）

這裏的演示代碼：

.wrapper { 
 
    height: 100vh; 
 
    display: grid; 
 
    align-content: stretch; 
 
    justify-content: stretch; 
 
    grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr; 
 
    grid-template-rows: 1fr 5fr 1fr; 
 
    grid-template-areas: "header header header header header header header" 
 
         "main main main main main main main" 
 
         "footer footer footer footer footer footer footer" 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    display: grid; 
 
    grid-template-columns: 60px 7fr 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-template-areas: "sidebar box-content box-content"; 
 
} 
 

 
.box-content { 
 
    grid-area: box-content; 
 
    align-items: start; 
 
    align-content: start; 
 
    display: grid; 
 
    grid-gap: 10px; 
 
    padding: 10px; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
} 
 

 
.header { grid-area: header; } 
 
.sidebar { grid-area: sidebar; } 
 
.footer { grid-area: footer; } 
 

 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background-color: #f1c40f; 
 
    border: 1px solid white; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="header"> Header Header Header Header Header</div> 
 
    <div class="main"> 
 
    <div class="sidebar">Sidebar Sidebar </div> 
 
    <div class="box-content"> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div>  
 
    </div> 
 
    </div> 
 
    <div class="footer"> Footer Footer Footer Footer Footer </div> 
 
</div>

來源

2017-09-03 12:04:48

/* Just some horrible stylization to better see boxes */ 
 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background-color: #f1c40f; 
 
    border: 1px solid white; 
 
} 
 

 
/* Definition of the 3 grids used*/ 
 

 
.wrapper { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    
 
    align-content: stretch; 
 
    justify-content: stretch; 
 
    grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr; 
 
    grid-template-rows: 1fr 5fr 1fr; 
 
    grid-template-areas: "header header header header header header header" 
 
         "main main main main main main main" 
 
         "footer footer footer footer footer footer footer" 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    display: grid; 
 
    grid-template-columns: 60px 7fr 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-template-areas: "sidebar box-content box-content"; 
 
} 
 

 
/* This box-content's grid-template-columns have many ones, it is done to modify 
 
only the grid-template-areas with media-queries for larger screen*/ 
 

 
.box-content { 
 
    grid-area: box-content; 
 
    grid-template-rows: 1fr 7fr 1fr; 
 
    grid-auto-flow: row; padding:20px; 
 
    
 
    
 
} 
 

 
/* Definition of the different element's grid-area*/ 
 

 
.header { 
 
    grid-area: header; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
} 
 

 

 
.card-1 { 
 
    display: grid; 
 
    width: 100%; margin-bottom:20px; min-height:500px; 
 
    
 
    
 
} 
 

 
.footer { 
 
    grid-area: footer; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Layout 1</title> 
 
</head> 
 
<body> 
 

 
    <!-- I apologize for non-semantic tags, only a quick prototyping --> 
 

 
    <div class="wrapper"> 
 
    <div class="header"> Header Header Header Header Header</div> 
 
    <div class="main"> 
 
     <div class="sidebar">Sidebar Sidebar </div> 
 
     <div class="box-content"> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> Footer Footer Footer Footer Footer </div> 
 
    </div> 
 
</body> 
 
</html>

能否請您檢查您的解決方案

多的例子 - https://gridbyexample.com/examples/

來源

2017-09-03 09:27:55

嘿，感謝您的回答和鏈接，我會definetly切特出來，但爲第i個油墨我必須澄清我想要做的（我的英語不是最好的），並且圖像是我認爲最好的辦法：[圖片]（https://ibb.co/hDoXrv）。我想卡全部放在中間列，逐行（並添加溢出：滾動.box-內容 – Halkeand

元素CSS網不換

回答

相關問題