2
私はCSSグリッドを理解しようとする学生です。特定のdiv列や行をすべて変更せずにサイズを変更し、絵などの要素をグリッドに挿入するにはどうすればよいですか？CSSグリッドを使ってdivの高さを変更する
私はここでそれを試みた：https://codepen.io/lukeheald/pen/bYQNgj
私は、私はそれが彼らのすべての高さを変える調整したい特定の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>
マイケルの答えをありがとう、これも私の最終的な解決策を見つけるのを助けた。 –