不同高度的CSS網格單元

如何向上移動「內容」和「右」區塊？問題是我不能使用子嵌套網格。我不需要黑客：無邊距，因爲標題可以是不同的高度。沒有JavaScript。只有純CSS。如果可能的話。不同高度的CSS網格單元

現在我的標記看起來像這樣：

.wrapper { 
 
    border: 1px solid red; 
 
    display: grid; 
 
    grid-template-columns: 1fr 2fr 1fr; 
 
    grid-template-areas: 
 
      "aside header header" 
 
      "left content right"; 
 
    grid-gap: 15px; 
 
} 
 

 
.header, .aside, .left, .content, .right { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    height: 30px; /* in real case it's responsive height */ 
 
} 
 

 
.aside { 
 
    grid-area: aside; 
 
    height: 80px; /* in real case it's responsive height */ 
 
} 
 

 
.left { 
 
    grid-area: left; 
 
} 
 

 
.content { 
 
    grid-area: content; 
 
    background: yellow; 
 
} 
 

 
.right { 
 
    grid-area: right; 
 
    background: yellow; 
 
} 
 

 
.left, .content, .right { 
 
    height: 100px; /* in real case it's responsive height */ 
 
}

<div class="wrapper"> 
 
    <!-- this order should be on mobile --> 
 
    <header class="header">header</header> 
 
    <aside class="aside">aside</aside> 
 
    <div class="left">left</div> 
 
    <div class="content">content</div> 
 
    <div class="right">right</div> 
 
</div>

來源

2017-08-21 Lukas Pierce

你能創建2個獨立的網格嗎？一個用於上排，另一個用於下排 – user3808887

溶液（使用CSS只）是通過增加另一行到您grid-template-areas:

.wrapper { 
 
    border: 1px solid red; 
 
    display: grid; 
 
    grid-template-columns: 1fr 2fr 1fr; 
 
    grid-template-areas: 
 
      "aside header header" 
 
      "aside content right" 
 
      "left content right"; 
 
    grid-gap: 15px; 
 

 
} 
 

 
.header, .aside, .left, .content, .right { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    height:30px; /* in real case it's responsive height */ 
 
} 
 

 
.aside { 
 
    grid-area: aside; 
 
    height: 80px; /* in real case it's responsive height */ 
 
} 
 

 
.left { 
 
    grid-area: left; 
 
} 
 

 
.content { 
 
    grid-area: content; 
 
    background: yellow; 
 

 
} 
 

 
.right { 
 
    grid-area: right; 
 
    background: yellow; 
 
} 
 

 
.left, .content, .right { 
 
    height: 100px; /* in real case it's responsive height */ 
 
}

<div class="wrapper"> 
 
    <!-- this order should be on mobile --> 
 
    <header class="header">header</header> 
 
    <aside class="aside">aside</aside> 
 
    <div class="left">left</div> 
 
    <div class="content">content</div> 
 
    <div class="right">right</div> 
 
</div>

來源

2017-08-21 08:21:44 Nick

你可以使用這樣的事情（邊距），移動內容和右邊靠近頭。如果這改變了移動設備上的視圖並使其變得凌亂，則需要根據設備創建2個視圖，並針對不同的設備使用不同的css值。

.wrapper { 
 
    border: 1px solid red; 
 
    display: grid; 
 
    grid-template-columns: 1fr 2fr 1fr; 
 
    grid-template-areas: 
 
      "aside header header" 
 
      "left content right"; 
 
    grid-gap: 15px; 
 
} 
 

 
.header, .aside, .left, .content, .right { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    height: 30px; /* in real case it's responsive height */ 
 
} 
 

 
.aside { 
 
    grid-area: aside; 
 
    height: 80px; /* in real case it's responsive height */ 
 
} 
 

 
.left { 
 
    grid-area: left; 
 
} 
 

 
.content { 
 
    grid-area: content; 
 
    background: yellow; 
 
    margin-top: -50px; 
 
} 
 

 
.right { 
 
    grid-area: right; 
 
    background: yellow; 
 
    margin-top: -50px; 
 
} 
 

 
.left, .content, .right { 
 
    height: 100px; /* in real case it's responsive height */ 
 
}

<div class="wrapper"> 
 
    <!-- this order should be on mobile --> 
 
    <header class="header">header</header> 
 
    <aside class="aside">aside</aside> 
 
    <div class="left">left</div> 
 
    <div class="content">content</div> 
 
    <div class="right">right</div> 
 
</div>

來源

2017-08-21 07:54:57

感謝您的回答。但是，「標題」塊的高度不同呢？它也是敏感的。 –

你說頭可能會有反應，這是否意味着它可以像用戶所做的一樣大，還是最大的一定高度？ –

入住這

.wrapper { 
 
     border: 1px solid red; 
 
     display: grid; 
 
     grid-template-columns: 1fr 2fr 1fr; 
 
     grid-template-areas: 
 
       "aside header header" 
 
       "left content right"; 
 
     grid-gap: 15px; 
 
    } 
 

 
    .header, .aside, .left, .content, .right { 
 
     border: 1px solid black; 
 
     padding: 10px; 
 
    } 
 

 
    .header { 
 
     grid-area: header; 
 
     height: 30px; /* in real case it's responsive height */ 
 
    } 
 

 
    .aside { 
 
     grid-area: aside; 
 
     height: 80px; /* in real case it's responsive height */ 
 
    } 
 

 
    .left { 
 
     grid-area: left; 
 
    } 
 

 
    .content { 
 
     grid-area: content; 
 
     background: yellow; 
 
     float: left; 
 
    } 
 

 
    .right { 
 
     grid-area: right; 
 
     background: yellow; 
 
     float: right; 
 
    } 
 

 
    .left, .content, .right { 
 
     height: 100px; /* in real case it's responsive height */ 
 
    }

<div class="wrapper"> 
 
     <!-- this order should be on mobile --> 
 
     <div id="left-side"> 
 
     <aside class="aside">aside</aside> 
 
     <div class="left">left</div> 
 
     </div> 
 

 
     <div id="right-side"> 
 
     <header class="header">header</header> 
 

 
     <div id="right-side2"> 
 
      <div class="content">content</div> 
 
      <div class="right">right</div> 
 
     </div> 
 
     </div> 
 
    </div>

來源

2017-08-21 08:05:55 ROCKY

他說訂單需要保持不變，如果你可以移動DIV，這是一個很好的解決方案。 –

不同高度的CSS網格單元

回答

相關問題