Изменение высоты div с помощью сетки CSS

Я студент, пытающийся понять сетки 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>


css css-grid
person Luke Heald    schedule 29.11.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как только вы измените высоту строки или ширину столбца, это изменение произойдет во всей строке. Таким образом, это, естественно, повлияет на все элементы сетки в строке/столбце.

Одним из способов решения этой проблемы было бы создание сетки с множеством небольших строк/столбцов. Затем ваши элементы охватывают достаточное количество строк / столбцов, чтобы достичь желаемой длины.

В моем примере ниже есть контейнер сетки с двумя столбцами и 12 строками. Но вроде всего три ряда. Я использую ключевое слово span для установки высоты отдельных элементов. (Вам не обязательно использовать span. Сетка предоставляет несколько методов для изменения размера и позиционирования элементов.)

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>

person Michael Benjamin    schedule 29.11.2017
comment
Спасибо за ваш ответ, Майкл, это также помогло мне найти окончательное решение. - person Luke Heald; 30.11.2017

arrow_upward
1
arrow_downward

Вот примеры изменения контейнеров сетки на примере пера. Это то, что вы ищете?

Изменение только одного контейнера сетки, не затрагивая другие: 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";
    }
}
person Sue    schedule 29.11.2017
comment
Привет Сью, спасибо, что нашли время, чтобы вернуться ко мне. Я считаю, что это последний пример, который я пытаюсь достичь. Я хочу, чтобы мой герой вверху был большим полноэкранным белым пространством с изображением посередине. Аналогично этой странице: boxmodeldigital.com/our-work/rentokil Могу ли я достичь это с сеткой? В вашем коде есть часть, которая делает строки больше, это ''grid-template-rows: .5fr 1fr 1.5fr 2fr 2.5fr 3fr; сетки-шаблоны-области - person Luke Heald; 30.11.2017
comment
Привет, Сью, удалось выяснить остальное, основываясь на приведенном выше ответе, спасибо. - person Luke Heald; 30.11.2017