个人中心
gpt4 book ai didi

css - 使用 CSS 网格更改 div 高度

转载 作者：行者123 更新时间：2023-11-28 11:02:22 25 4
gpt4 key购买 nike

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

最佳答案

一旦您更改了行高或列宽，整个行都会发生这种变化。所以它自然会影响行/列上的所有网格元素。

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

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

关于css - 使用 CSS 网格更改 div 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47558918/

25 4 0
文章推荐： css - ASP.NET 核心 MVC : why the content of wwwroot directory wasn't copied?
文章推荐： JavaScript\获取上周四的日期
文章推荐： javascript - Angular2 xlink :href Issues
文章推荐： css - 更改 svg 颜色 div 命中框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com