元素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网不换

回答

相关问题