如何在 CSS 网格下方添加间距并启动新网格

Question

我有一个网格，在屏幕左侧显示一堆按钮。屏幕右侧有一个网格（虽然我不知道是否真的需要），显示联系信息。

我正在尝试在前两个网格下方插入第三个网格，该网格将具有一系列单独的按钮。但是，当我尝试插入第三个网格时，它出现在第一个和第二个网格之间。

让第三个网格位于前两个网格下方的唯一方法是在第三个网格之前放置一个横幅 div，然后横幅会向右浮动。

div {
  font-family: 'Arial', sans-serif;
}

.banner {
  text-align: center;
  color: green;
  font-size: 46px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px;
}

.buttonGrid {
  display: grid;
  grid-template-columns: repeat(4 , 1fr);
  grid-template-rows: 1fr;
  grid-column-end: auto;
  grid-row-end: auto;
  float: left;
  gap: 5px;
  width: 75px;
  height: auto;
}

.buttons {
  text-align: center;
  color: green;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid black;
  border-radius: 10px;
  padding: 15px;
  box-shadow: inset 0 0 10px black;
  align-content: center;
  text-wrap: nowrap;
}

.pocTable { /* this is the one I don't know if it needs to be a grid, but I can't get it to display how I want without it being a grid */
  text-align: center;
  border: 2px dashed black;
  padding: 10px;
  float: right;
  display: grid;
}

.usefulLinks {
  display: grid;
  grid-auto-columns: 1fr;
}

.usefulLinks div {
  border: 1px solid black;
  text-align: center;
}

.usefulLinks > div:first-child {
  grid-column: span 3;
  text-align: center;
  color: green;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 36px;
  padding-bottom: 10px;
}

    <div class="banner">banner</div>

    <div class="buttonGrid">
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
        <div class="buttons">things and stuff</div>
    </div>

    <div class="pocTable">
        <div class="pocHeader">contact info:</div>
        <div class="pocText"><b>Phone: </b> 123-4567</div>
        <div class="pocText"><b>Email: </b> [email protected]</div>
        <div class="pocHeader">manager:</div>
        <div class="pocText">First Last</div>
        <div class="pocHeader">manager:</div>
        <div class="pocText">First Last</div>
    </div>

    <div></div>

    <div class="usefulLinks">
        <div>useful links</div>
        <div>first</div>
        <div>second</div>
        <div>third</div>
    </div>

如前所述，如果我将

<div class="banner">useful links</div>

放在

<div class="pocTable">

和

<div class="usefulLinks">

网格之间，它会将有用链接网格向下移动，但横幅会从右侧浮动。

Answer 1

不完全确定您要做什么，但我稍微编辑了您的代码并使其有用的链接位于其他两个链接的下方。这是查看我做了什么的链接 - https://codepen.io/Matthew-Wright-the-sans/pen/yLmeoMO

告诉我这是否有帮助

I changes the widths so that they take up space and the useful links will not wrap around them.