使用 CSS 网格更改 div 高度

Question

我是一名试图了解 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>



    

Answer 1

一旦您更改了行高或列宽，该更改将发生在整行。所以自然会影响行/列上的所有网格项。

解决该问题的一种方法是创建一个包含许多小行/列的网格。然后让您的项目跨越足够多的行/列以达到您想要的长度。

在下面的示例中，有一个包含两列和 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>

Answer 2

以下是使用示例笔更改网格容器的示例。这是你要找的吗？

只更改一个网格容器而不影响其他网格容器： https://codepen.io/suefeng/pen/XzyXVb

.image1 {
    grid-area: image1;
    background-color: blue;
    width: 200px;
    height: 200px;
}

更改列宽，使一个更窄，一个更宽： https://codepen.io/suefeng/pen/vWQLpe

@media screen and (min-width: 736px)
{
    .grid {
      display: grid;
      grid-template-columns: .5fr 1.5fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-areas: 
          "title title"
          "image1 text1"
          "image2 text2"
          "image3 text3"
          "image4 text4"
          "footer footer";
    }
}

将每一行更改为不同的高度： https://codepen.io/suefeng/pen/jaQWjN

@media screen and (min-width: 736px)
{
    .grid {
      display: grid;
      grid-template-columns: .5fr 1.5fr;
      grid-template-rows: .5fr 1fr 1.5fr 2fr 2.5fr 3fr;
      grid-template-areas: 
          "title title"
          "image1 text1"
          "image2 text2"
          "image3 text3"
          "image4 text4"
          "footer footer";
    }
}