grid 布局高度平分 - CSDN文库

可以使用 grid-template-rows 属性来实现高度平分。例如，如果有三个元素需要平分高度，可以这样设置： ``` .container { display: grid; grid-template-rows: 1fr 1fr 1fr; } ``` 其中，1fr 表示将剩余空间平均分成三份，每个元素占据一份。

相关问题

对于grid布局,怎么使两边高度一致

对于grid布局，要使两边的高度一致，可以使用grid-template-rows属性来设置每一行的高度，并将值设置为minmax(0, 1fr)。这个属性的作用是让每一行的高度都自适应，并且最小高度为0，最大高度为1fr（即平分剩余空间），这样就可以让两边的高度保持一致。例如，下面的代码展示了如何使用grid布局实现两边高度一致： ``` .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); } .left { grid-column: 1 / 2; } .right { grid-column: 2 / 3; } ``` 在这个例子中，我们通过设置grid-template-rows属性使每一行的高度都自适应，并且左右两边的元素分别占据了第一列和第二列。这样，左右两边的高度就会自动保持一致了。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> /* 使用grid布局 / .container { display: grid; grid-template-columns: 200px 1fr; / 左侧宽度为200px，右侧占满剩余空间 / grid-template-rows: 100vh; / 总高度与视窗高度相同 / } / 左侧侧边栏样式 / .sidebar { background-color: #f0f0f0; } / 右侧盒子的容器样式 / .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } / 右侧5个盒子样式 / .box { flex-grow: 1; / 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="sidebar">  </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </body> </html> 更改代码使右侧第3，4，5个盒子边框出现一定圆角且与左侧状态栏有一定的距离

可以通过添加以下样式来实现： ``` .box:nth-child(n+3) { border-radius: 10px; margin-top: 10px; } ``` 其中，`:nth-child(n+3)` 表示选择第3个及之后的所有 `.box` 元素，`border-radius` 可以设置圆角半径，`margin-top` 可以设置与上一个元素的距离。完整的代码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> /* 使用grid布局 */ .container { display: grid; grid-template-columns: 200px 1fr; /* 左侧宽度为200px，右侧占满剩余空间 */ grid-template-rows: 100vh; /* 总高度与视窗高度相同 */ } /* 左侧侧边栏样式 */ .sidebar { background-color: #f0f0f0; } /* 右侧盒子的容器样式 */ .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* 右侧5个盒子样式 */ .box { flex-grow: 1; /* 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } /* 第3，4，5个盒子样式 */ .box:nth-child(n+3) { border-radius: 10px; margin-top: 10px; } </style> </head> <body> <div class="container"> <div class="sidebar">  </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </body> </html> ```

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通