Css Grid列的堆疊在彼此之上

Question

我知道我的HTML和CSS有點太多擴展，但是當我組合東西時它有更糟的錯誤。我的代碼是低於我所需要的是最後一個酒吧適合像另一個。我試圖改變該行的填充和邊距，以及完全重做我的網格。

#grid { 
 
    margin: auto; 
 
    display: grid; 
 
    grid-template-rows: auto; 
 
    width: 100%; 
 
} 
 

 
#topbar { 
 
    grid-template-columns: repeat(20, 1fr); 
 
    background-color: white; 
 
    grid-row: 1/2; 
 
    display: grid; 
 
} 
 

 
#topbar #pad1 { 
 
    grid-column: 1/3; 
 
    background-color: #e0e0df; 
 
} 
 

 
#topbar #img { 
 
    border-top: 2px solid black; 
 
    border-left: 2px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 3/5; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #li { 
 
    border-bottom: 1px solid black; 
 
    border-top: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 5/15; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #acre { 
 
    border-bottom: 1px solid black; 
 
    border-top: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 15/17; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #pdf { 
 
    border-bottom: 1px solid black; 
 
    border-top: 2px solid black; 
 
    border-right: 2px solid black; 
 
    grid-column: 17/19; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #pad2 { 
 
    grid-column: 19/21; 
 
    background-color: #e0e0df; 
 
} 
 

 
/* For each lan div id use #then div name to style */ 
 

 
#plot1 { 
 
    grid-template-columns: repeat(20, 1fr); 
 
    background-color: #cdcdcb; 
 
    grid-row: 2/3; 
 
    display: grid; 
 
} 
 

 
#plot1 #pad1 { 
 
    grid-column: 1/3; 
 
    background-color: #deded8; 
 
} 
 

 
#plot1 #img { 
 
    border-bottom: 1px solid black; 
 
    border-left: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 3/5; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#plot1 #li { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 5/15; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#plot1 #acre { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 15/17; 
 
    color: rgb(179, 9, 50); 
 
    text-align: right; 
 
} 
 

 
#plot1 #pdf { 
 
    border-bottom: 1px solid black; 
 
    border-right: 2px solid black; 
 
    grid-column: 17/19; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#plot1 #pad2 { 
 
    grid-column: 19/21; 
 
    background-color: #e0e0df; 
 
} 
 

 
#last { 
 
    grid-template-columns: repeat(20, 1fr); 
 
    background-color: #cdcdcb; 
 
    grid-row: 3/4; 
 
    display: grid; 
 
} 
 

 
#last #pad1 { 
 
    grid-column: 1/3; 
 
    background-color: #deded8; 
 
} 
 

 
#last #img { 
 
    border-bottom: 1px solid black; 
 
    border-left: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 3/5; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#last #li { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 5/15; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#last #acre { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 15/17; 
 
    color: rgb(179, 9, 50); 
 
    text-align: right; 
 
} 
 

 
#last #pdf { 
 
    border-bottom: 1px solid black; 
 
    border-right: 2px solid black; 
 
    grid-column: 17/19; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#last #pad2 { 
 
    grid-column: 19/21; 
 
    background-color: #e0e0df; 
 
}

<div id="grid"> 
 
      <div id="topbar"> 
 
      <div id="pad1"> 
 
      </div> 
 
      <div id="img"> 
 
       <p>Property</p> 
 
      </div> 
 
      <div id="li"> 
 
       <p>Location &amp; Information</p> 
 
      </div> 
 
      <div id="acre"> 
 
       <p>Acareage</p> 
 
      </div> 
 
      <div id="pdf"> 
 
       <p>PDF</p> 
 
      </div> 
 
      <div id="pad2"> 
 
      </div> 
 
      </div> 
 
      <!--For each piece of land add a div with its name then set grid potition in css sheet.--> 
 
      <div id="plot1"> 
 
      <div id="pad1"> 
 
      </div> 
 
      <div id="img"> 
 
       <p>Property</p> 
 
      </div> 
 
      <div id="li"> 
 
       <p>Location &amp; Information</p> 
 
      </div> 
 
      <div id="acre"> 
 
       <p>Acareage</p> 
 
      </div> 
 
      <div id="pdf"> 
 
       <p>PDF</p> 
 
      </div> 
 
      <div id="pad2"> 
 
      </div 
 
      </div> 
 
      <div id="last"> 
 
      <div id="pad1"> 
 

 
      </div> 
 
      <div id="img"> 
 
       <p>hello</p> 
 
      </div> 
 
      <div id="li"> 
 

 
      </div> 
 
      <div id="acre"> 
 

 
      </div> 
 
      <div id="pdf"> 
 

 
      </div> 
 
      <div id="pad2"> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     <div id="foot"> 
 
      <p>Copyright &copy; 2017 Greater Texas Land Resources LP &amp;<a href="mailto:coding.matthew.horton@gmail.com"> Design</a></p> 
 
     </div> 
 
     </div>

最後一行是搞砸我試圖在它之前的行復制，因此創建一個可容納infromation

Answer 1

你沒有正確關閉div圖表類型的事情標籤。 （#pad2沒有正確關閉）

 <div id="pad2"> 
     </div 
     </div> 
     <div id="last"> 
     <div id="pad1"> 

旁邊，id只能使用一次，使用class，而不是當你需要申請相同的風格幾次。

#grid { 
 
    margin: auto; 
 
    display: grid; 
 
    grid-template-rows: auto; 
 
    width: 100%; 
 
} 
 

 
#topbar { 
 
    grid-template-columns: repeat(20, 1fr); 
 
    background-color: white; 
 
    grid-row: 1/2; 
 
    display: grid; 
 
} 
 

 
#topbar #pad1 { 
 
    grid-column: 1/3; 
 
    background-color: #e0e0df; 
 
} 
 

 
#topbar #img { 
 
    border-top: 2px solid black; 
 
    border-left: 2px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 3/5; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #li { 
 
    border-bottom: 1px solid black; 
 
    border-top: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 5/15; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #acre { 
 
    border-bottom: 1px solid black; 
 
    border-top: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 15/17; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #pdf { 
 
    border-bottom: 1px solid black; 
 
    border-top: 2px solid black; 
 
    border-right: 2px solid black; 
 
    grid-column: 17/19; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#topbar #pad2 { 
 
    grid-column: 19/21; 
 
    background-color: #e0e0df; 
 
} 
 

 
/* For each lan div id use #then div name to style */ 
 

 
#plot1 { 
 
    grid-template-columns: repeat(20, 1fr); 
 
    background-color: #cdcdcb; 
 
    grid-row: 2/3; 
 
    display: grid; 
 
} 
 

 
#plot1 #pad1 { 
 
    grid-column: 1/3; 
 
    background-color: #deded8; 
 
} 
 

 
#plot1 #img { 
 
    border-bottom: 1px solid black; 
 
    border-left: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 3/5; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#plot1 #li { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 5/15; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#plot1 #acre { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 15/17; 
 
    color: rgb(179, 9, 50); 
 
    text-align: right; 
 
} 
 

 
#plot1 #pdf { 
 
    border-bottom: 1px solid black; 
 
    border-right: 2px solid black; 
 
    grid-column: 17/19; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#plot1 #pad2 { 
 
    grid-column: 19/21; 
 
    background-color: #e0e0df; 
 
} 
 

 
#last { 
 
    grid-template-columns: repeat(20, 1fr); 
 
    background-color: #cdcdcb; 
 
    grid-row: 3/4; 
 
    display: grid; 
 
} 
 

 
#last #pad1 { 
 
    grid-column: 1/3; 
 
    background-color: #deded8; 
 
} 
 

 
#last #img { 
 
    border-bottom: 1px solid black; 
 
    border-left: 2px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 3/5; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#last #li { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 5/15; 
 
    color: rgb(179, 9, 50); 
 
    text-align: left; 
 
} 
 

 
#last #acre { 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    grid-column: 15/17; 
 
    color: rgb(179, 9, 50); 
 
    text-align: right; 
 
} 
 

 
#last #pdf { 
 
    border-bottom: 1px solid black; 
 
    border-right: 2px solid black; 
 
    grid-column: 17/19; 
 
    color: rgb(179, 9, 50); 
 
    text-align: center; 
 
} 
 

 
#last #pad2 { 
 
    grid-column: 19/21; 
 
    background-color: #e0e0df; 
 
}

<div id="grid"> 
 
      <div id="topbar"> 
 
      <div id="pad1"> 
 
      </div> 
 
      <div id="img"> 
 
       <p>Property</p> 
 
      </div> 
 
      <div id="li"> 
 
       <p>Location &amp; Information</p> 
 
      </div> 
 
      <div id="acre"> 
 
       <p>Acareage</p> 
 
      </div> 
 
      <div id="pdf"> 
 
       <p>PDF</p> 
 
      </div> 
 
      <div id="pad2"> 
 
      </div> 
 
      </div> 
 
      <!--For each piece of land add a div with its name then set grid potition in css sheet.--> 
 
      <div id="plot1"> 
 
      <div id="pad1"> 
 
      </div> 
 
      <div id="img"> 
 
       <p>Property</p> 
 
      </div> 
 
      <div id="li"> 
 
       <p>Location &amp; Information</p> 
 
      </div> 
 
      <div id="acre"> 
 
       <p>Acareage</p> 
 
      </div> 
 
      <div id="pdf"> 
 
       <p>PDF</p> 
 
      </div> 
 
      <div id="pad2"> 
 
      </div><!--- here was the syntax typo --> 
 
      </div> 
 
      <div id="last"> 
 
      <div id="pad1"> 
 

 
      </div> 
 
      <div id="img"> 
 
       <p>hello</p> 
 
      </div> 
 
      <div id="li"> 
 

 
      </div> 
 
      <div id="acre"> 
 

 
      </div> 
 
      <div id="pdf"> 
 

 
      </div> 
 
      <div id="pad2"> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     <div id="foot"> 
 
      <p>Copyright &copy; 2017 Greater Texas Land Resources LP &amp;<a href="mailto:coding.matthew.horton@gmail.com"> Design</a></p> 
 
     </div> 
 
     </div>