Changing div heights using CSS grid

Question

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?

I have attempted it here: https://codepen.io/lukeheald/pen/bYQNgj

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>

Michael Benjamin · Answer 1 · 2017-11-29T18:35:14.473

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.

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>

Thanks for your answer Michael, this also helped me find my final solution. — Luke Heald, Nov 30 '17 at 14:43

score 1 · Answer 2 · answered Nov 29 '17 at 18:37

Here are examples of changing the grid containers, using your example pen. Is this what you're looking for?

Changing just one grid container without affecting the other ones: https://codepen.io/suefeng/pen/XzyXVb

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

Changing the column widths so one is narrower, and one is wider: 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";
    }
}

Changing each row to a different height: 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";
    }
}

Hi Sue, thanks for taking the time to get back to me. I believe it is the last example that I am trying to achieve. I want my hero at the top to be a big fullscreen white space with an image in the middle. Similar to this page: http://www.boxmodeldigital.com/our-work/rentokil/ Can I achieve this with grid? In your code is the part that are making the rows bigger this ''grid-template-rows: .5fr 1fr 1.5fr 2fr 2.5fr 3fr; grid-template-areas" — Luke Heald, Nov 30 '17 at 09:05
Hi Sue, managed to figure out the rest based on above answer thank you. — Luke Heald, Nov 30 '17 at 14:42

Changing div heights using CSS grid

2 Answers2

Linked