使用CSS网格更改div高度 [英] Changing div heights using CSS grid
问题描述
我是一名试图了解CSS网格的学生。如何更改特定div列或行的大小而不改变它们的大小，并将诸如图片等的元素插入网格？
I'm a student trying to understand css grids. How do I change the size of a specific div column or row without changing them all and insert elements such as pictures etc into the grid?
我在这里尝试过： https：/ /codepen.io/lukeheald/pen/bYQNgj
如果我定位到特定的div，则我想对其进行调整以更改所有div的高度。
If I target the specific div I want to adjust it changes the height of all of them.
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>
推荐答案
更改后行的高度或列的宽度，这种变化会在整行中发生。因此，它自然会影响行/列上的所有网格项。
Once you change the height of a row or the width of a column, that change happens across the entire line. So it will naturally affect all grid items on the row / column.
解决该问题的一种方法是创建一个包含许多小行/列的网格。然后让您的项目跨足够多的行/列以达到所需的长度。
One way to address the problem would be to create a grid with many small rows / columns. Then have your items span across enough of rows / columns to achieve your desired length.
在下面的示例中，有一个包含两列和12行的网格容器。但是看起来只有三行。我使用 span 关键字设置单个项目的高度。 （您不必使用 span 。网格提供了多种方法来调整大小和定位项目。）
In my example below there is a grid container with two columns and 12 rows. But it looks like only three rows. I use the span keyword to set the height of individual items. (You don't have to use 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网格更改div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
