不同高度的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网格单元

回答

相关问题