网格列的行未显示为列

Question

我的 CSS Grid-formatted 页面有一行没有将三张图片放在指定的列中。

这是我的 HTML 代码：

<html>
  <title></title>
  <head></head>
  <body>
    <div class="Main">
        <div class="Header Box">
          <div id="One"> 
            <img src="https://s1.postimg.org/2gy4am3oov/Satellite_over_earth_2.jpg" width="200px" height="126px"/>
          </div>
          <div id="Two"><p>UNIVERSIAL</p><p>TECHNOLOGIES</p>     
          </div>
          <div id="Three"> Blah blah blah 
          </div>
        </div>

        <div class = "Second Row">
          <div>
          Technology you can trust

  Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BBB (Better Business Bureau) with an A+ rating.

  Ethersonic specializes in Computer  diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair  
        </div>
        <div>
          <img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" width="300" height="187"/>
        </div>
      </div>
        <div class="Third Row">
          <div>
        <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"
          </div>
          <div>
          <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"
          </div>
          <div>
          <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"
          </div>
      </div>
    </div>       
  </body>
</html>

问题出在标题为 Third Row 的行中。这里：

<div class="Third Row">

这是我的 CSS 代码：

.Main{
  background-color: yellow;
  display: grid;
  grid-template-columns:(3, 1fr);
}

.Header.Box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: red;
  grid-gap: 0;
}

#One, #Two, #Three {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;  
}

.Second.Row{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.Third.Row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: green;
}

问题在于标题为 Third Row

的 CSS 规则

.Third.Row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: green;
}

HTML-wise 和 CSS-wise，Third Row，格式与 Second Row 相同，但由于某些原因，Third Row 的 CSS 规则与 Second Row.

的规则不同

Answer 1

您的 html 有一些问题。您没有关闭 img 标签。这样做你的第三行布局将按照你定义的方式工作（三列）

<div class="Third Row">
  <div>
    <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203" /> <!-- add tag closing -->
  </div>
  <div>
    <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203" /> <!-- add tag closing -->
  </div>
  <div>
    <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203" /> <!-- add tag closing -->
  </div>

Codepen example

网格列的行未显示为列

Row of grid columns not showing as columns

html

css

css-grid