时间戳

首页 > 解决方案 > 添加内容时如何维护网格布局

html - 添加内容时如何维护网格布局

问题描述

我想保持网格布局，并且我还对项目使用 flexbox，因为我想划分标题和内容。但是，布局会更改以适应内容。例如，如果我将 Lorem 放在侧边栏中，该栏将展开。如果我希望布局是相同的比例而不管项目内的内容如何解决这个问题？

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');


.grid-container{
    display: grid;
    padding: 10px;
    height: 100vh;
    gap: 20px;
    background-color: wheat;
    grid-template-areas: 
    "side-bar main main ad" 
    "side-bar main main ad"
    "side-bar main main ad"
    "side-bar footer footer ad"
    ;
    text-align: center;
    
}

p{
    text-align: start;
}

.grid-container > div{
    display: flex;
    flex-direction: column;
    font-size: 20px;
    padding: 10px;
    border: solid;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    
}


.side-bar{
    grid-area: side-bar;
    
    
}

.main{
    grid-area: main;
   
}

.ad{
    grid-area: ad;
   
}

.footer{
    grid-area: footer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid and Flexbox</title>

    <link rel="stylesheet" href="canvas.css"/> 
</head>
<body>

<!-- GRID BOXES-->
<div class="grid-container"> 
    <div class="side-bar">  
        <div> Grid title 1</div>
        <div><p>  </p></div>
    
    </div>
    <div class="main">      Grid title 2</div>
    <div class="footer">    Grid title 3</div>
    <div class="ad">        Grid title 4
        <div><p></p></div>
    </div>
</div>

    
</body>
</html>

感谢您的帮助。

标签： htmlcss

解决方案

您需要指定列大小，否则将使用取决于内容的自动宽度：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
.grid-container {
  display: grid;
  padding: 10px;
  height: 100vh;
  gap: 20px;
  background-color: wheat;
  grid-template-columns:1fr 1fr 1fr 1fr; /* ADDED */
  grid-template-areas: 
   "side-bar main main ad" 
   "side-bar main main ad" 
   "side-bar main main ad"
   "side-bar footer footer ad";
  text-align: center;
}

p {
  text-align: start;
}

.grid-container>div {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  padding: 10px;
  border: solid;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
}

.side-bar {
  grid-area: side-bar;
}

.main {
  grid-area: main;
}

.ad {
  grid-area: ad;
}

.footer {
  grid-area: footer;
}
<div class="grid-container">
    <div class="side-bar">
      <div> Grid title 1</div>
      <div>
        <p> </p>
      </div>

    </div>
    <div class="main"> Grid title 2</div>
    <div class="footer"> Grid title 3</div>
    <div class="ad"> Grid title 4
      <div>
        <p></p>
      </div>
    </div>
  </div>

推荐阅读