html - 需要帮助让我的 div 显示内联

Question

我正在尝试使用 div 使第 4 行变宽。我正在尝试将其内联到页面下方。出于某种原因，它包括顶行的底部两个和该文件的中间两个随机位于其下方，它不响应格式。请记住，我上次编写代码是在 HTML 仍然是所有网站的主要语言的时候。在旁注中，如果有人可以帮助我理解必要的 jQuery 来在用户端进行搜索过滤器。

我已经尝试了几次不同的尝试来让它在使用 divs 之前使用表格。

.item3 {
  grid-area: main;
}

.item1 {
  grid-area: main;
}

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

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

<div class="grid-container">
  <div class="divTableBody">
    <div class="divtablerow">
      <div class="divTableCell">
        <p>NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE</p>
        <p>VIN: 3C4PDCBG1JT508626 STOCK #: 082030</p>
        <p>MSRP$27,385</p>
        <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
      </div>
    </div>
  </div>
  <div class="gridcontainer">
    <p>NEW 2018 JEEP RENEGADE ALTITUDE 4X2</p>
    <p>VIN: ZACCJABB4JPH91207 STOCK #: 586043</p>
    <p>MSRP$25,915</p>
    <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
  </div>
  <div class="gridcontainer">
    <div class="divTableBody">
      <div class="divTableRow">
        <div class="divTableCell">
          <p>NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE</p>
          <p>VIN: 3C4PDCBG3JT511401 STOCK #: 082035</p>
          <p>MSRP$27,385</p>
          <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
        </div>
      </div>
      <div class="gridcontainer">
        <div class="divTableBody">
          <div class="divtablerow">
            <div class="divTableCell">
              <p>NEW 2018 JEEP RENEGADE SPORT 4X4</p>
              <p>VIN: ZACCJBAB4JPJ43841 STOCK #: 586049</p>
              <p>MSRP$26,240</p>
              <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gridcontainer">
      <div class="divTableBody">
        <div class="divTableCell">
          <p>NEW 2018 JEEP RENEGADE SPORT 4X4</p>
          <p>VIN: ZACCJBAB3JPJ42826 STOCK #: 586051</p>
          <p>MSRP$26,240</p>
          <p><a class="buttonGhost" href="#">Request internet advertised price.</a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="gridcontainer">
    <div class="divTableBody">
      <div class="divtablecell">
        <p>NEW 2019 JEEP COMPASS SPORT FWD</p>
        <p>VIN: 3C4NJCAB8KT615373 STOCK #: 492005</p>
        <p>MSRP$25,285</p>
        <p><a class="buttonGhost" href="#">Request internet 
        advertised price.</a></p>
      </div>
    </div>
  </div>
</div>

了解我的代码哪里出了问题，并确定为我的所有零件制作 4 宽行的最佳方法。

Answer 1

display: grid; 应用于网格容器的直接子项。在您的 html 中，grid-container 只有 4 个直接子级。这就是为什么你得到 4 列。在您的 HTML 中重新排列它们应该可以解决问题。

为了使其具有响应性，您可以尝试使用:

grid-template-columns: repeat( auto-fit, minmax(550px, 1fr));