CSS Grid 2 列和半高

发布于08月26日

我试着把我的CSS grid分成两列，父高度相同，但每个较小的框的高度是主框的一半.请参阅所附图像.然而，我不能完全得到正确的布局，需要一些帮助.到目前为止，请参阅我的代码.

.item1 { grid-area: header; }
.item2 { grid-area: menu; height:200px;}
.item3 { grid-area: main; height:100px;}
.item4 { grid-area: right; height:100px;}
.item5 { grid-area: footer; height:200px;}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'menu right'
    'main footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>Grid Layout</h1>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

.item1 { grid-area: header; } .item2 { grid-area: menu; height: 200px; } .item3 { grid-area: main; height: 100px; } .item4 { grid-area: right; height: 100px; } .item5 { grid-area: footer; height: 200px; } .grid-container { display: grid; grid-template-areas: 'header header' 'menu right' 'menu footer' 'main footer'; gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container>div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; }

<!DOCTYPE html> <html> <head> </head> <body> <h1>Grid Layout</h1> <div class="grid-container"> <div class="item1">Header</div> <div class="item2">Menu</div> <div class="item3">Main</div> <div class="item4">Right</div> <div class="item5">Footer</div> </div> </body> </html>

CSS Grid 2 列和半高

推荐答案

Css相关问答推荐

主dart 文件未加载Flutter Web

如何在Ionic上更改输入的浮点数名称 colored颜色？

无限交替css动画之间的未知延迟

material 设计--Bootstrap输入域问题

如何将此 Select 器转换为TailWind类

仅 Select 嵌套 div 的底部，而不知道它们的嵌套程度

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

当滚动量较小时，在滚动问题上动画粘性导航

滚动弹性盒

Tailwind CSS 不输出背景类

具有共享的自动调整列宽的多个 CSS 网格

使元素在顶部和中心都有粘性

如何将 CSS 样式应用于 Quarto 输出

为什么 flexbox 中的在应用居中时不会调整大小？

BootStrap：右对齐嵌套手风琴

如何更改下拉列表的宽度？

如何根据其中的内容自动调整
的高度？

BEM 块、命名和嵌套

在 IE9-10 中压缩 SVG 的背景大小

如何在不使用浮动的情况下垂直对齐 div？