我是一名试图理解 CSS 网格的学生。如何更改特定 div 列或行的大小而不更改全部并将图片等元素插入网格中？
我在这里尝试过:https://codepen.io/lukeheald/pen/bYQNgj
如果我针对特定的 div，我想调整它，它会改变所有 div 的高度。
body{
font-family: 'Anton', sans-serif;
margin: 0;
}
/* Main sidebar style, dark background and transition.*/
#sidebar{
background: black;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
/* Sidebar visibile transition and position*/
#sidebar.visible{
left: 0px;
transition: left 0.3s linear;
}
/* ul list styles*/
ul{
margin: 0px;
padding: 0px;
}
/* list styles*/
ul li{
list-style: none;
}
/* link styles such as underlining and color etc.*/
ul li a{
background:#1C1E1F;
color: #fff;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
/* Sidebar button styles for lines.*/
#sidebar-btn{
display: inline-block;
vertical-align: middle;
width:50px;
height: 15px;
cursor: pointer;
margin: 20px;
position: absolute;
top: 0px;
right: -80px;
}
/* Edit physical lines of button.*/
#sidebar-btn span{
height: 5px;
background: black;
margin-bottom: 5px;
display: block;
}
/* changing 2 line to have smaller width than top.*/
#sidebar-btn span:nth-child(2){
width: 75%;
}
/* changing third line to be smaller than 2nd line */
#sidebar-btn span:nth-child(3){
width: 50%;
}
/*Grid start*/
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"title title"
"image1 image1"
"text1 text1"
"image2 image2"
"text2 text2"
"footer footer";
}
.title {
grid-area: title;
justify-self: center;
background-color: white;
}
#hero{
height: 300px;
}
.image1 {
grid-area: image1;
background-color: blue;
}
.text1 {
grid-area: text1;
background-color: green;
}
.image2 {
grid-area: image2;
background-color: orange;
}
.text2 {
grid-area: text2;
background-color: pink;
}
.footer {
grid-area: footer;
background-color: purple;
}
@media screen and (min-width: 736px)
{
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"title title"
"image1 text1"
"image2 text2"
"footer footer";
} <head>
<meta charset="UTF-8">
<title>Grid Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<script src="jquery/jquery.js"></script>
</head>
<body>
<!–– Sidebar Start ––>
<div id="sidebar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">DEMO</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">SOCIAL MEDIA</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!–– Sidebar End ––>
<!–– hero ––>
<div class="grid">
<div id="hero" class="title">Hero
</div>
<div class="image1">image1</div>
<div class="text1">text1</div>
<div class="image2">image2</div>
<div class="text2">text2</div>
<div class="footer">footer</div>
</div>
</body>
最佳答案
一旦更改行高或列宽，该更改就会发生在整行上。所以它自然会影响行/列上的所有网格项。
解决该问题的一种方法是创建一个包含许多小行/列的网格。然后让您的元素跨越足够的行/列以达到您想要的长度。
在下面的示例中，有一个包含两列和 12 行的网格容器。但看起来只有三排。我使用 span 关键字来设置单个元素的高度。 (您不必使用span。Grid provides multiple methods for sizing and positioning items.)
article {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(12, 1fr);
grid-row-gap: 5px;
height: 75vh;
}
section:nth-child(1) { grid-column-start: 1; grid-row: 1 / span 3; }
section:nth-child(2) { grid-column-start: 2; grid-row: 1 / span 4; }
section:nth-child(3) { grid-column-start: 1; grid-row: 5 / span 2; }
section:nth-child(4) { grid-column-start: 2; grid-row: 5 / span 3; }
section:nth-child(5) { grid-column-start: 1; grid-row: 9 / span 4; }
section:nth-child(6) { grid-column-start: 2; grid-row: 9 / span 2; }
/* for illustration only */
section:nth-child(odd) { background-color: lightgreen; }
section:nth-child(even) { background-color: orangered; }
article { border: 1px solid gray; }<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>关于css - 使用 CSS 网格更改 div 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47558918/