元素未包装在 CSS 网格中
Elements not wrapping in CSS Grid
大家好,
Web 开发的新手,我正在尝试学习如何使用漂亮的 css 网格工具,但实际上我受困于此:
我希望我的卡片在下一行中一张一张地自动排列(使用相同的列模板),但实际上我在浏览器中只看到一张卡片。
我认为问题出在我的 .wrapper
身高 vh
上。我尝试了 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>
谢谢
/* 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/
要逐行换行,请使用 auto-fit
和 minmax
函数。
完整解释如下:
这是一个基本的演示: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>
大家好,
Web 开发的新手,我正在尝试学习如何使用漂亮的 css 网格工具,但实际上我受困于此:
我希望我的卡片在下一行中一张一张地自动排列(使用相同的列模板),但实际上我在浏览器中只看到一张卡片。
我认为问题出在我的 .wrapper
身高 vh
上。我尝试了 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>
谢谢
/* 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/
要逐行换行,请使用 auto-fit
和 minmax
函数。
完整解释如下:
这是一个基本的演示: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>